﻿<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 ielt9 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 ielt9 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ielt9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js no-ielt9" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8"/>

	<!-- force latest ie rendering engine (even in intranet) -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

	<title>HTML5 Today</title>
	<meta name="description" content="Are you curious about all the HTML5 buzz? Don't understand what the big deal is (after all, it's just HTML)? We'll show you what's in HTML5 and related technologies as well as outline a few forward-looking discussions. Expect to walk away with an understanding of what's in HTML5, why you should be using it today, and a guide to get you started."/>
	<meta name="msapplication-task" content="name=Start Presentation;action-uri=index.html;icon-uri=favicon.ico"/>
	<meta name="msapplication-task" content="name=Tools & Resources;action-uri=index.html#resources;icon-uri=favicon.ico"/>
	<meta name="msapplication-task" content="name=About Michael Flanakin;action-uri=http://about.me/flanakin;icon-uri=http://michaelflanakin.com/portals/michaelflanakin.com/favicon.ico"/>
	<meta name="msapplication-task" content="name=About James Wren;action-uri=http://twitter.com/mrharb;icon-uri=http://twitter.com/favicon.ico"/>
	<meta name="msapplication-navbutton-color" content="#f14a29"/>
	<meta name="author" content="Michael Flanakin"/>
	<link rel="license" href="http://html5today.codeplex.com/license"/>
	<link rel="author" href="../humans.txt"/>   

	<!-- mobile viewport optimized @ http://j.mp/bplateviewport -->
	<meta name="viewport" content="width=960,user-scalable=no"/>
	
	<!-- place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
	<link rel="shortcut icon" href="../favicon.ico"/>
	<link rel="apple-touch-icon" href="../apple-touch-icon.png"/>
	
	<link href="../content/play.css" rel="stylesheet"/>
	<link href="../content/shCoreDefault.css" rel="stylesheet"/>

	<!-- all JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
	<script src="../scripts/modernizr-2.0.6.min.js"></script>
</head>
<body class="deck-container">

	<header id="title" class="slide">
		<h1>
			<object class="html5" data="../content/images/html5.svg" type="image/svg+xml">
				<span class="html5"></span>
			</object>
			<span class="today">Today</span>
		</h1>
		<!-- TODO: Add byline and HTML5 tech classes -->
		<aside id="presenter" itemscope="itemscope" itemtype="http://schema.org/Person">
			<div itemprop="name">Michael Flanakin</div>
			<div itemprop="url"><a href="http://michaelflanakin.com">michaelflanakin.com</a></div>
		</aside>
		<nav>
			<ul>
				<li class="semantics"><span>&nbsp;</span></li>
				<li class="offstore"><span>&nbsp;</span></li>
				<li class="device"><span>&nbsp;</span></li>
				<li class="connect"><span>&nbsp;</span></li>
				<li class="media"><span>&nbsp;</span></li>
				<li class="graphics"><span>&nbsp;</span></li>
				<li class="perfint"><span>&nbsp;</span></li>
				<li class="styling"><span>&nbsp;</span></li>
			</ul>
		</nav>
		<!-- TODO: Add an as-of date; the spec has already changed some features :-/ -->
	</header>


	<article id="html5">
		<header id="html5-summary" class="slide">
			<div class="slide-container">
				<h1>HTML5 is...</h1>
				<ul class="slide-content">
					<li class="orgs"><span>4</span> organizations</li>
					<li class="groups"><span>13</span> working groups</li>
					<li class="pubs"><span>211</span> pubs</li>
					<li class="specs"><span>189</span> specs</li>
					<li class="pages"><span>12,034</span> pages</li>
					<li class="bugs"><span>946</span> bugs &amp; issues</li>
					<li class="snapshot">A snapshot of the HTML living standard</li>
				</ul>
			</div>
		</header>
		<section id="html5-history" class="slide">
			<div class="slide-container">
				<header><h1>HTML5 is...full of drama</h1></header>
				<!-- TODO: Create a visualization of this timeline that shows the HTML5 logo in human stages @ 0 (diaper + binky), 2 (shoes), 5-7 (report card), 9-11 (soccer ball), 16 (car keys), 18 (grad), 21 (beer/alcohol) -->
				<ol class="slide-content">
					<li class="left"><b>1990</b> Berners-Lee designed HTML</li>
					<li class="left"><b>1992</b> Connolly created HTML+ spec</li>
					<li class="left"><b>1995</b> IETF released HTML 2.0</li>
					<li class="left"><b>1996</b> IETF closed HTML Working Group</li>
					<li class="left"><b>1997</b> W3C published HTML 3.2</li>
					<li class="left"><b>1997</b> W3C published HTML 4.0</li>
					<li class="left"><b>1999</b> W3C published HTML 4.01</li>
					<li class="right"><b>2000</b> W3C published XHTML 1.0</li>
					<li class="right"><b>2000</b> W3C chartered move to XML</li>
					<li class="right"><b>2001</b> W3C published XHTML 1.1</li>
					<li class="right"><b>2004</b> WHATWG launched</li>
					<li class="right"><b>2006</b> Berners-Lee "reinvented HTML"</li>
					<li class="right"><b>2008</b> W3C released HTML5 Draft</li>
					<li class="right"><b>2010</b> W3C closed XHTML Working Group</li>
				</ol>
			</div>
		</section>
		<section id="html5-pubs" class="slide">
			<div class="slide-container">
				<header><h1>HTML5 is...many things</h1></header>

				<object class="html5pubs slide-content" data="../content/images/html5-pubs.svg" type="image/svg+xml">
					<div class="html5pubs slide-content">
						<ul>
							<li class="html">
								<h2>HTML</h2>
								<ul>
									<li><progress value="2" max="5"><span>Last Call</span></progress>HTML5</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>HTML + RDFa</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>HTML Microdata</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>HTML Canvas 2D Context</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>HTML5 Markup</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>HTML5 Diff from HTML4</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Polyglot Markup (HTML/XHTML Compat)</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Text Alternatives</li>
								</ul>
							</li>
							<li class="webperf">
								<h2>Web Performance</h2>
								<ul>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Navigation Timing</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Performance Timeline</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Resource Timing</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>User Timing</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Page Visibility</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Timing Control for Script-Based Animations</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Efficient Script Yielding</li>
								</ul>
							</li>
							<li class="geo">
								<h2>Geolocation</h2>
								<ul>
									<li><progress value="0" max="5"><span>Not Published</span></progress>DeviceOrientation Event</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Geolocation API</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Geolocation API L2</li>
								</ul>
							</li>
							<li class="webnot">
								<h2>Web Notifications</h2>
								<ul>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Web Notifications</li>
									<li><progress value="-0" max="5"><span>Not Published</span></progress>Web Notifications Overview</li>
								</ul>
							</li>
							<li class="webapps">
								<h2>Web Apps</h2>
								<ul>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Asynchronous DOM Mutation Notification</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Clipboard APIs and Events</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Cross-Origin Resource Sharing (CORS)</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L1</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Core</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Events</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 HTML</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Style</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Traversal and Range</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Views</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Abstract Schemas</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Core</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>DOM L3 Events</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Load and Save</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Validation</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Views and Formatting</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Xpath</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>DOM L4 Core</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM Requirements</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>Element Traversal</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>File API</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>File API: Directories and System</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>File API: Writer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Index DB</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Programmable HTTP Caching and Serving</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Progress Events</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Selectors API</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Selectors API L2</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Server-Sent Events</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Uniform Messaging Policy</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Web DOM Core</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Web IDL</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Web Messaging</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Web Sockets</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Web SQL Database</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Web Storage</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Web Workers</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress><abbr title="XML Binding Language">XBL</abbr>2 Spec</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress><abbr title="XML Binding Language">XBL</abbr>2 Primer</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>XmlHttpRequest</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>XmlHttpRequest L2</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget Access Request Policy</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget Digital Signatures</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Widget Interface</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Widget Packaging and XML Configuration</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Widget Updates</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Widget URIs</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget view-mode Media Feature</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Widgets Embedding</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Widgets 1.0: Landscape</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Widgets 1.0: Requirements</li>
								</ul>
							</li>
							<li class="svg">
								<h2>SVG</h2>
								<ul>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.1</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>SVG 1.1 2Ed</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.1 Mobile</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.2 Tiny</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>SVG2</li>
									<li><progress value="-5" max="5"><span>Note</span></progress>Accessibility</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Color: Primer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Color: Language</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Compositing</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Connector: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Connector: Language</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Filter Requirements</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Filters: Primer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Filters: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Gradients (Advanced)</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Fonts</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Integration</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Layout Requirements and Use Cases</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Layout: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Layout: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Masking and Clipping</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Access Events</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Paint Servers</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Parameters: Primer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Parameters: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Printing Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Print Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Print: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Print: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Referenced Parameter Variables: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Referenced Parameter Variables: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Rendering Order: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Rendering Order: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Text</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms: Primer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Transforms: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms (2D FX): Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms (2D FX): Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects: Language</li>
								</ul>
							</li>
							<li class="css">
								<h2>CSS</h2>
								<ul>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>CSS1</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>CSS2</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>CSS 2.1</li>
									<li><progress value="-5" max="5"><span>Note</span></progress>Snapshot 2007</li>
									<li><progress value="-5" max="5"><span>Note</span></progress>Snapshot 2010</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>2D Transforms</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>3D Transforms</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Animations</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Aural Style Sheets</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Backgrounds and Borders L3</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Backgrounds and Borders L4</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Behavioral Extensions</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Box Model (Basic)</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Box Model (Extended)</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Cascading and Inheritance</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Color</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Color Correction</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Device Adaptation</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Exclusions</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Flexible Box Layout</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Fonts</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Generated and Replaced Content</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Generated Content for Paged Media</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Grid Layout</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Grid Positioning</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Hyperlink Presentation</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Image Values and Replaced Content</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Line Formatting</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Line Grid</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Lists and Counters</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Marquee</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Math</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Media Queries</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Mobile Profile 2.0</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Multi-column Layout</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Namespaces</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Object Model L3</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Object Model View</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Page Media</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Presentation Levels</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Print Profile</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Positioning</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Reader Media Type</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Regions</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Ruby</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Scoping</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Selectors L3</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Selectors L4</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Speech</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Style Attributes</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Syntax</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Tables</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Template Layout</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Text</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Transitions</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>TV Profile</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>UI</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Values and Units</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Writing Modes</li>
								</ul>
							</li>
							<li class="webrtc">
								<h2>Web RTC</h2>
								<ul>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Audio Stream Functions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Functional Component Functions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Media Stream Functions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>P2P Connection Functions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Video Stream Functions</li>
								</ul>
							</li>
							<li class="device">
								<h2>Device</h2>
								<ul>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Access Control Use Cases and Requirements</li>
									<li><progress value="-0" max="5"><span>Not Published</span></progress>APIs Design Patterns</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>APIs Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Application Launcher</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Batter Status</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Calendar API</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Contact API</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Feature Permissions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Gallery</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Capture API</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Capture (HTML)</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Messaging API</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Network Information API</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Privacy Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Privacy Ruleset</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Permissions for Device API Access</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Systems Info and Events</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Tasks</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>User Interaction</li>
								</ul>
							</li>
							<li class="ecma">
								<h2>ECMAScript</h2>
								<ul>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>ECMA-262</li>
								</ul>
							</li>
							<li class="ietf">
								<h2>IETF</h2>
								<ul>
									<li>Web Origin Concept</li>
									<li>WebSocket Protocol</li>
								</ul>
							</li>
						</ul>
					</div>
				</object>
			</div>
		</section>
		<section id="html5-process" class="slide">
			<div class="slide-container">
				<header><h1>HTML5 is...victim to a process</h1></header>
				<!-- TODO: Consider a visualization for this workflow; see: http://www.w3.org/Consortium/Process -->
				<ol class="slide-content">
					<li class="draft"><progress value="1" max="5"><span>Working Draft</span></progress>First Public <br/>Working Draft</li>
					<li class="lastcall"><progress value="2" max="5"><span>Last Call</span></progress>Last Call <br/>Working Draft <span id="html5-ishere" class="slide">HTML5 "last call" ended <time datetime="2011-08-03">Aug 3, 2011</time></span></li>
					<li class="candidate"><progress value="3" max="5"><span>Candidate Rec</span></progress>Candidate <br/>Recommendation</li>
					<li class="proposed"><progress value="4" max="5"><span>Proposed Rec</span></progress>Proposed <br/>Recommendation</li>
					<li class="rec"><progress value="5" max="5"><span>Recommendation</span></progress>Recommendation</li>
				</ol>
			</div>
		</section>
		<section id="html5-inprogress" class="slide">
			<div class="slide-container">
				<header><h1>HTML5 is...not done</h1></header>

				<!-- TODO: Find a fallback for the <progress> tag (or make one?) -->
				<!-- TODO: Show a visualization (pie chart?) that depicts what percentage of the pubs are at each step in the process -->
				<!-- TODO: Add without status, then show with status -->
				<object class="html5pubs slide-content" data="../content/images/html5-pubs-status.svg" type="image/svg+xml">
					<div class="html5pubs slide-content">
						<ul>
							<li class="html">
								<h2>HTML</h2>
								<ul>
									<li><progress value="2" max="5"><span>Last Call</span></progress>HTML5</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>HTML + RDFa</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>HTML Microdata</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>HTML Canvas 2D Context</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>HTML5 Markup</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>HTML5 Diff from HTML4</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Polyglot Markup (HTML/XHTML Compat)</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Text Alternatives</li>
								</ul>
							</li>
							<li class="webperf">
								<h2>Web Performance</h2>
								<ul>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Navigation Timing</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Performance Timeline</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Resource Timing</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>User Timing</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Page Visibility</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Timing Control for Script-Based Animations</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Efficient Script Yielding</li>
								</ul>
							</li>
							<li class="geo">
								<h2>Geolocation</h2>
								<ul>
									<li><progress value="0" max="5"><span>Not Published</span></progress>DeviceOrientation Event</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Geolocation API</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Geolocation API L2</li>
								</ul>
							</li>
							<li class="webnot">
								<h2>Web Notifications</h2>
								<ul>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Web Notifications</li>
									<li><progress value="-0" max="5"><span>Not Published</span></progress>Web Notifications Overview</li>
								</ul>
							</li>
							<li class="webapps">
								<h2>Web Apps</h2>
								<ul>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Asynchronous DOM Mutation Notification</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Clipboard APIs and Events</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Cross-Origin Resource Sharing (CORS)</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L1</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Core</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Events</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 HTML</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Style</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Traversal and Range</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Views</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Abstract Schemas</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Core</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>DOM L3 Events</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Load and Save</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Validation</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Views and Formatting</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Xpath</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>DOM L4 Core</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM Requirements</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>Element Traversal</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>File API</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>File API: Directories and System</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>File API: Writer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Index DB</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Programmable HTTP Caching and Serving</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Progress Events</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Selectors API</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Selectors API L2</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Server-Sent Events</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Uniform Messaging Policy</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Web DOM Core</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Web IDL</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Web Messaging</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Web Sockets</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Web SQL Database</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Web Storage</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Web Workers</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress><abbr title="XML Binding Language">XBL</abbr>2 Spec</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress><abbr title="XML Binding Language">XBL</abbr>2 Primer</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>XmlHttpRequest</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>XmlHttpRequest L2</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget Access Request Policy</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget Digital Signatures</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Widget Interface</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Widget Packaging and XML Configuration</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Widget Updates</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Widget URIs</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget view-mode Media Feature</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Widgets Embedding</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Widgets 1.0: Landscape</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Widgets 1.0: Requirements</li>
								</ul>
							</li>
							<li class="svg">
								<h2>SVG</h2>
								<ul>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.1</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>SVG 1.1 2Ed</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.1 Mobile</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.2 Tiny</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>SVG2</li>
									<li><progress value="-5" max="5"><span>Note</span></progress>Accessibility</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Color: Primer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Color: Language</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Compositing</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Connector: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Connector: Language</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Filter Requirements</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Filters: Primer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Filters: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Gradients (Advanced)</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Fonts</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Integration</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Layout Requirements and Use Cases</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Layout: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Layout: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Masking and Clipping</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Access Events</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Paint Servers</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Parameters: Primer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Parameters: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Printing Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Print Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Print: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Print: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Referenced Parameter Variables: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Referenced Parameter Variables: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Rendering Order: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Rendering Order: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Text</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms: Primer</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Transforms: Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms (2D FX): Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms (2D FX): Language</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects: Primer</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects: Language</li>
								</ul>
							</li>
							<li class="css">
								<h2>CSS</h2>
								<ul>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>CSS1</li>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>CSS2</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>CSS 2.1</li>
									<li><progress value="-5" max="5"><span>Note</span></progress>Snapshot 2007</li>
									<li><progress value="-5" max="5"><span>Note</span></progress>Snapshot 2010</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>2D Transforms</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>3D Transforms</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Animations</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Aural Style Sheets</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Backgrounds and Borders L3</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Backgrounds and Borders L4</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Behavioral Extensions</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Box Model (Basic)</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Box Model (Extended)</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Cascading and Inheritance</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Color</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Color Correction</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Device Adaptation</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Exclusions</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Flexible Box Layout</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Fonts</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Generated and Replaced Content</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Generated Content for Paged Media</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Grid Layout</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Grid Positioning</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Hyperlink Presentation</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Image Values and Replaced Content</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Line Formatting</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Line Grid</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Lists and Counters</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Marquee</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Math</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Media Queries</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Mobile Profile 2.0</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Multi-column Layout</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Namespaces</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Object Model L3</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Object Model View</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Page Media</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Presentation Levels</li>
									<li><progress value="2" max="5"><span>Last Call</span></progress>Print Profile</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Positioning</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Reader Media Type</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Regions</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Ruby</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Scoping</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Selectors L3</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Selectors L4</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Speech</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Style Attributes</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Syntax</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Tables</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Template Layout</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Text</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Transitions</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>TV Profile</li>
									<li><progress value="3" max="5"><span>Candidate Rec</span></progress>UI</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Values and Units</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Writing Modes</li>
								</ul>
							</li>
							<li class="webrtc">
								<h2>Web RTC</h2>
								<ul>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Audio Stream Functions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Functional Component Functions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Media Stream Functions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>P2P Connection Functions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Video Stream Functions</li>
								</ul>
							</li>
							<li class="device">
								<h2>Device</h2>
								<ul>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Access Control Use Cases and Requirements</li>
									<li><progress value="-0" max="5"><span>Not Published</span></progress>APIs Design Patterns</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>APIs Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Application Launcher</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Batter Status</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Calendar API</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Contact API</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Feature Permissions</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Gallery</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Capture API</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Capture (HTML)</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Messaging API</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Network Information API</li>
									<li><progress value="-1" max="5"><span>Draft Note</span></progress>Privacy Requirements</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Privacy Ruleset</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Permissions for Device API Access</li>
									<li><progress value="1" max="5"><span>Working Draft</span></progress>Systems Info and Events</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>Tasks</li>
									<li><progress value="0" max="5"><span>Not Published</span></progress>User Interaction</li>
								</ul>
							</li>
							<li class="ecma">
								<h2>ECMAScript</h2>
								<ul>
									<li><progress value="5" max="5"><span>Recommendation</span></progress>ECMA-262</li>
								</ul>
							</li>
							<li class="ietf">
								<h2>IETF</h2>
								<ul>
									<li>Web Origin Concept</li>
									<li>WebSocket Protocol</li>
								</ul>
							</li>
						</ul>
					</div>
				</object>
			</div>
		</section>
		<footer id="html5-footer" class="slide">
			<div class="slide-container">
				<h1>It's complicated!</h1>
				<div class="slide-content">
					<video src="../content/video/wearethefirst.mp4" controls="controls">
						<p><a href="http://www.xtranormal.com/watch/7991991/web-sockets-we-are-the-first">xtranormal.com/watch/7991991</a></p>
					</video>
					<p class="slide">...then we can't use it, right?</p>
					<p id="html5-footer-cantuse" class="slide"><em>Wrong!</em></p>
				</div>
			</div>
		</footer>
	</article>


	<article id="detect">
		<header id="detect-intro" class="slide-container">
			<div class="slide">
				<hgroup>
					<h1><span>Feature detection</span></h1>
					<h2><span>or:</span> How I learned to stop worrying and love HTML5</h2>
				</hgroup>
				<div class="slide-content">
					<p>But, before we get there, <span class="newline">one quick note...</span></p>
					<ul class="slide">
						<li>Graceful Degradation</li>
						<li>Progressive Enhancement</li>
					</ul>
				</div>
			</div>
		</header>
		<section id="detect-js" class="slide-container">
			<section class="slide">
				<header><h1>So, yeah, feature detection...</h1></header>
				<div class="slide-content">
					<p>Just a bit of JavaScript...</p>
					<pre class="brush:js">if (!!window.localStorage) { ... }</pre>
					<!-- TODO: Add a note that states that web storage is disabled when running a file locally (i.e. file://...) -->
					<p class="slide">...and, by the way, you <strong class="localstorage">do</strong><strong class="no-localstorage">don't</strong> have support for HTML5 web storage</p>
				</div>
			</section>
			<section class="slide">
				<header>
					<hgroup>
						<h1>So, yeah, feature detection...</h1>
						<h2>Does a global object have a specific member?</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<pre class="brush:js">if (!!window.localStorage) { ... }</pre>
				</div>
			</section>
			<section class="slide">
				<header>
					<hgroup>
						<h1>So, yeah, feature detection...</h1>
						<h2>Does an element have a specific member?</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<div class="code"><pre class="brush:js">if (!!document.createElement('video').canPlayType) { ... }</pre></div>
					<p class="slide">...which you <strong class="video">can</strong><strong class="no-video">cannot</strong> use in your browser, by the way</p>
				</div>
			</section>
			<section class="slide">
				<header>
					<hgroup>
						<h1>So, yeah, feature detection...</h1>
						<h2>Does a function return an expected value?</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<div class="code"><pre class="brush:js">var v = document.createElement('video');
if (!!v.canPlayType){
	switch (v.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"')) {
		case 'probably': ... break;
		case 'maybe': ... break;
		case '': ... break;
	}
}</pre></div>
					<p class="slide">...which you <span class="h264-probably">can <em>probably</em></span><span class="h264-maybe"><em>may</em> be able to</span><strong class="no-h264">cannot</strong> play in your browser</p>
				</div>
			</section>
			<section class="slide">
				<header>
					<hgroup>
						<h1>So, yeah, feature detection...</h1>
						<h2>Does an element attribute retain its value?</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<div class="code"><pre class="brush:js">var i = document.createElement('input');
i.type = 'email';
if (i.type == 'email'){ ... }</pre></div>
					<p class="slide">...which you <strong class="inputemail">can</strong><strong class="no-inputemail">cannot</strong> use in your browser</p>
				</div>
			</section>
		</section>
		<section id="detect-mod" class="slide-container">
			<section id="detect-mod-summary" class="slide">
				<header><h1>Introducing Modernizr</h1></header>
				<div class="slide-content">
					<ul>
						<li>JavaScript feature detection</li>
						<li>CSS-enabled feature detection</li>
						<li>Conditional resource loading</li>
						<li>HTML5 markup styling</li>
					</ul>
				</div>
			</section>
			<section id="detect-mod-localstorage-before" class="slide">
				<header>
					<hgroup>
						<h1>Introducing Modernizr</h1>
						<h2>Web storage detection with JavaScript</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<div class="before"><pre class="brush:js">if (!!window.localStorage) { ... }</pre></div>
				</div>
			</section>
			<section id="detect-mod-localstorage-after" class="slide">
				<header>
					<hgroup>
						<h1>Introducing Modernizr</h1>
						<h2>Web storage detection with Modernizr</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<div class="after"><pre class="brush:js">if (Modernizr.localstorage) { ... }</pre></div>
				</div>
			</section>
			<section id="detect-mod-video-before" class="slide">
				<header>
					<hgroup>
						<h1>Introducing Modernizr</h1>
						<h2>Video codec detection with JavaScript</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<div class="code before"><pre class="brush:js">var v = document.createElement('video');
if (!!v.canPlayType){
	switch (v.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"')) {
		case 'probably': ... break;
		case 'maybe': ... break;
		case '': ... break;
	}
}</pre></div>
				</div>
			</section>
			<section id="detect-mod-video-after" class="slide">
				<header>
					<hgroup>
						<h1>Introducing Modernizr</h1>
						<h2>Video codec detection with Modernizr</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<div class="code after"><pre class="brush:js">switch (Modernizr.video.h264) {
&nbsp; &nbsp; case 'probably': ... break;
&nbsp; &nbsp; case 'maybe': ... break;
&nbsp; &nbsp; case '': ... break;
}</pre></div>
				</div>
			</section>
			<section id="detect-mod-localstorage-css" class="slide">
				<header>
					<hgroup>
						<h1>Introducing Modernizr</h1>
						<h2>Web storage detection with CSS</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<div class="code"><pre class="brush:xml">&lt;button class="localstorage" onclick="..."&gt;Save!&lt;/button&gt;
&lt;div class="no-localstorage"&gt;
	Sorry, but you don't have support for HTML5 web storage :(
&lt;/div&gt;</pre></div>
					<!-- TODO: Replace with deck.codemirror -->
					<div class="slide">
						<p>
							See...
							<div class="demo">
								<button class="localstorage">Save!</button>
								<div class="code no-localstorage">
									Sorry, but you don't have support for HTML5 web storage :(
								</div>
							</div>
						</p>
					</div>
					<p class="slide">...didn't believe me, did you!</p>
				</div>
			</section>
		</section>
		<section id="detect-modload" class="slide-container">
			<section id="detect-optimize-web" class="slide">
				<header><h1>Optimizing web apps</h1></header>
				<ul class="slide-content">
					<li>Minimize lookup time
						<ul>
							<li><span class="slidenote" title="Who are we kidding? You know you'll need to do this yourself!">Cache references to external objects</span></li>
						</ul>
					</li>
					<li><span class="slidenote" title="sometimes perceived performance is more advantageous than actual performance">Get out of the way</span>
						<ul>
							<li>Load your scripts last</li>
							<li>Non-blocking, async loading</li>
						</ul>
					</li>
					<li>Fewer requests
						<ul>
							<li>Combine scripts</li>
							<li>Only get what you need and cache it</li>
						</ul>
					</li>
					<li>Smaller requests
						<ul>
							<li>Minimize and Gzip scripts</li>
							<li>Separate conditional resources to lessen larger impact</li>
						</ul>
					</li>
				</ul>
			</section>
			<section id="detect-optimize-modload" class="slide">
				<header><h1>Optimizing with Modernizr.load()</h1></header>
				<ul class="slide-content">
					<li class="nope" title="Modernizr.load() cannot help with this">Minimize lookup time
						<ul>
							<li><span class="slidenote" title="Who are we kidding? You know you'll need to do this yourself!">Cache references to external objects</span></li>
						</ul>
					</li>
					<li class="yep" title="Modernizr.load() can help with this"><span class="slidenote" title="sometimes perceived performance is more advantageous than actual performance">Get out of the way</span>
						<ul>
							<li>Load your scripts last</li>
							<li>Non-blocking, async loading</li>
						</ul>
					</li>
					<li class="yep" title="Modernizr.load() can help with this">Fewer requests
						<ul>
							<li class="nope" title="Modernizr.load() cannot help with this">Combine scripts</li>
							<li>Only get what you need and cache it</li>
						</ul>
					</li>
					<li class="yep" title="Modernizr.load() can help with this">Smaller requests
						<ul>
							<li class="nope" title="Modernizr.load() cannot help with this">Minimize and Gzip scripts</li>
							<li>Separate conditional resources to lessen larger impact</li>
						</ul>
					</li>
				</ul>
			</section>
			<section id="detect-modload-example" class="slide">
				<header><h1>Optimizing with Modernizr.load()</h1></header>
				<div class="slide-content">
<pre class="brush:js">Modernizr.load({
	test: Modernizr.geolocation,
	yep : ['geo.js', 'geo.css'],
	nope: 'fallback.js'
});</pre>
				</div>
			</section>
		</section>
		<section id="detect-fallback" class="slide-container">
			<div class="slide">
				<header><h1>Polyfills, shims, and fallbacks, oh my!</h1></header>
				<div class="slide-content">
					<p>IE(6|7|8) + (polyfill || shim || fallback) == happ<b>IE</b>ness :-D</p>
					<p><a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills</a></p>
				</div>
			</div>
		</section>
		<footer id="detect-footer" class="slide-container">
			<div class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Tools...</h2>
					<ul>
						<li><a href="http://modernizr.com">modernizr.com</a></li>
						<li><a href="http://yepnopejs.com">yepnopejs.com</a></li>
						<li>...both come with ASP.NET MVC3 (w/ HTML5 semantic markup)</li>
						<li>...or get them via NuGet</li>
					</ul>
					<h2>References...</h2>
					<ul>
						<li><a href="http://html5test.com">html5test.com</a></li>
						<li><a href="http://caniuse.com">caniuse.com</a></li>
						<li><a href="http://medialoot.com/blog/html5-compendium">medialoot.com/blog/html5-compendium</a></li>
						<li><a href="http://diveintohtml5.org/everything.html">diveintohtml5.org/everything.html</a> &ndash; list of manual feature detection methods</li>
						<li><a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills</a></li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM04">Filling the HTML5 Gaps with Polyfills and Shims (Mix11)</a></li>
					</ul>
				</div>
			</div>
		</footer>
	</article>


	<article id="semantics">
		<header id="semantics-top" class="slide-container">
			<div class="slide">
				<h1>The Semantic Web is...</h1>
				<div class="slide-content">
					<blockquote cite="http://www.scientificamerican.com/article.cfm?id=the-semantic-web">
						<p>
							The Semantic Web is not a separate Web but an extension of the current one, in which 
							information is given well-defined meaning, better enabling computers and people to work in 
							cooperation.
						</p>
						<div class="author">Tim Berners-Lee</div>
					</blockquote>
					<blockquote cite="http://w3.org/html/logo">
						<p>
							Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along 
							with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both 
							programs and your users.
						</p>
						<div class="author">W3C</div>
					</blockquote>
				</div>
			</div>
		</header>
		<section id="semantics-new" class="slide-container">
			<div class="slide">
				<header><h1>We've got a lot to cover...</h1></header>
				<div class="slide-content">
					<!-- TODO: Link each of these to their respective sub-sections -->
					<!-- TODO: Should hovering over an item offer an option to navigate to the parent section (e.g. Sections for <article>)? -->
					<!-- TODO: Format this list in a series of columns, based on the available page width -->
					<ul>
						<li><code>&lt;article&gt;</code></li>
						<li><code>&lt;aside&gt;</code></li>
						<li><code>&lt;audio&gt;</code></li>
						<li><code>&lt;canvas&gt;</code></li>
						<li><code>&lt;command&gt;</code></li>
						<li><code>&lt;datalist&gt;</code></li>
						<li><code>&lt;details&gt;</code></li>
						<li><code>&lt;embed&gt;</code></li>
						<li><code>&lt;figcaption&gt;</code></li>
						<li><code>&lt;figure&gt;</code></li>
						<li><code>&lt;footer&gt;</code></li>
						<li><code>&lt;header&gt;</code></li>
						<li><code>&lt;hgroup&gt;</code></li>
						<li><code>&lt;keygen&gt;</code></li>
						<li><code>&lt;mark&gt;</code></li>
						<li><code>&lt;meter&gt;</code></li>
						<li><code>&lt;nav&gt;</code></li>
						<li><code>&lt;output&gt;</code></li>
						<li><code>&lt;progress&gt;</code></li>
						<li><code>&lt;rp&gt;</code></li>
						<li><code>&lt;rt&gt;</code></li>
						<li><code>&lt;ruby&gt;</code></li>
						<li><code>&lt;section&gt;</code></li>
						<li><code>&lt;source&gt;</code></li>
						<li><code>&lt;summary&gt;</code></li>
						<li><code>&lt;time&gt;</code></li>
						<li><code>&lt;video&gt;</code></li>
						<li><code>&lt;wbr&gt;</code></li>
					</ul>
					<p class="slide">...and those are just the <em>new</em> tags!</p>
				</div>
			</div>
		</section>
		<section id="semantics-meta" class="slide-container">
			<header id="semantics-meta-tags" class="slide">
				<h1>Root, metadata, and scripting</h1>
				<ul class="slide-content">
					<li><mark title="Updated with HTML5"><code>&lt;!DOCTYPE&gt;</code></mark></li>
					<li><code>&lt;base&gt;</code></li>
					<li><code>&lt;head&gt;</code></li>
					<li><mark title="Updated with HTML5"><code>&lt;html&gt;</code></mark></li>
					<li><mark title="Updated with HTML5"><code>&lt;link&gt;</code></mark></li>
					<li><mark title="Updated with HTML5"><code>&lt;meta&gt;</code></mark></li>
					<li><code>&lt;noscript&gt;</code></li>
					<li><mark title="Updated with HTML5"><code>&lt;script&gt;</code></mark></li>
					<li><mark title="Updated with HTML5"><code>&lt;style&gt;</code></mark></li>
					<li><code>&lt;title&gt;</code></li>
				</ul>
			</header>
			<section id="semantics-meta-code-after" class="slide">
				<header><h1>Before &amp; after</h1></header>
				<!-- TODO: JavaScript Ninja Tip: CSS up top, scripts at the bottom -->
				<div class="slide-content">
<div class="code before"><pre class="brush:xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" 
	"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
	&lt;title&gt;...&lt;/title&gt;
	&lt;link href="/css/main.css"  rel="stylesheet" type="text/css"/&gt;
	&lt;link href="/css/print.css" rel="stylesheet" type="text/css" 
	      media="print"/&gt;
	&lt;link href="/favicon.ico" rel="shortcut icon"/&gt;
	&lt;style media="screen" type="text/css"&gt;
		.warning { color: red }
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	...
	&lt;script src="/js/main.js" language="javascript" type="text/javascript"&gt;
	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div>
				</div>
			</section>
			<section id="semantics-meta-code-before" class="slide">
				<header><h1>Before &amp; after</h1></header>
				<div class="slide-content">
<div class="code after"><pre class="brush:xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html
	                                                    &gt;
&lt;html                                                    lang="en"&gt;
&lt;head&gt;
	&lt;meta                                               charset="utf-8"/&gt;
	&lt;title&gt;...&lt;/title&gt;
	&lt;link href="/css/main.css"  rel="stylesheet"                /&gt;
	&lt;link href="/css/print.css" rel="stylesheet" 
	      media="print"/&gt;
	&lt;link href="/favicon.ico" rel="shortcut icon"/&gt;
	&lt;style media="screen"                &gt;
		.warning { color: red }
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	...
	&lt;script src="/js/main.js"                                             &gt;
	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div>
				</div>
			</section>			
			<section id="semantics-meta-doctype" class="slide">
				<header><h1>New doctype</h1></header>
				<div class="slide-content">
					<div class="code">
						<ul>
							<li><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"              <span class="newline">"http://www.w3.org/TR/html4/strict.dtd"&gt;</span></code></li>
							<li><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <span class="newline">"http://www.w3.org/TR/html4/loose.dtd"&gt;</span></code></li>
							<li><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"     <span class="newline">"http://www.w3.org/TR/html4/frameset.dtd"&gt;</span></code></li>
							<li><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <span class="newline">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span></code></li>
							<li><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"     <span class="newline">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;</span></code></li>
							<li><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"              <span class="newline">"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;</span></code></li>
						</ul>
						<p>Or...</p>
						<p><code>&lt;!DOCTYPE html&gt;</code></p>
						<p>Seriously, which one are you more likely to remember?</p>
					</div>
				</div>
			</section>
			<section id="semantics-meta-rel" class="slide">
				<header>
					<hgroup>
						<h1>Yes, I had relations with that web page</h1>
						<h2>Semantic linking for &lt;a&gt;, &lt;area&gt;, and &lt;link&gt;</h1>
					</hgroup>
				</header>
				<div class="slide-content">
					<ul>
						<li><code>alternate</code></li>
						<li><code>archives</code></li>
						<li><code>author</code></li>
						<li><code>bookmark</code>*</li>
						<li><code>external</code>*</li>
						<li><code>help</code></li>
						<li><code>icon</code>**</li>
						<li><code>license</code></li>
						<li><code>next</code></li>
						<li><code>nofollow</code>*</li>
						<li><code>noreferrer</code>*</li>
						<li><code>pingback</code>**</li>
						<li><code>prefetch</code></li>
						<li><code>prev</code></li>
						<li><code>search</code></li>
						<li><code>sidebar</code></li>
						<li><code>stylesheet</code></li>
						<li><code>tag</code></li>
					</ul>
					<aside>
						<p>* <code>&lt;a&gt;</code> and <code>&lt;area&gt;</code> only</p>
						<p>** <code>&lt;link&gt;</code> only</p>
					</aside>
				</div>
			</section>
		</section>
		<section id="semantics-section" class="slide-container">
			<header id="semantics-section-tags" class="slide">
				<h1>Sections</h1>
				<div class="slide-content">
					<ul>
						<li><code>&lt;address&gt;</code></li>
						<li><ins><span class="slidenote" title="think: repeated content, like what you might create an Atom/RSS feed for"><code>&lt;article&gt;</code></span></ins></li>
						<li><ins><code>&lt;aside&gt;</code></ins></li>
						<li><code>&lt;body&gt;</code></li>
						<li><ins><code>&lt;footer&gt;</code></ins></li>
						<li><mark><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code></mark></li>
						<li><ins><code>&lt;header&gt;</code></ins></li>
						<li><ins><code>&lt;hgroup&gt;</code></ins></li>
						<li><ins><code>&lt;nav&gt;</code></ins></li>
						<li><ins><code>&lt;section&gt;</code></ins></li>
					</ul>
					<!-- TODO: Add this information into an appendix -->
					<p>Google analyzed ~1B web pages in Dec 2005</p>
					<p><a href="http://code.google.com/webstats">code.google.com/webstats</a></p>
				</div>
			</header>
			<section id="semantics-section-ie" class="slide">
				<header><h1>One caveat: IE</h1></header>
				<div class="slide-content">
					<p>Don't understand HTML5 semantic markup? No problem!</p>
					<div class="slide"><pre class="brush:js">document.createElement('awesome');</pre></div>
					<div class="slide">
						<p class="ielt9">
							<style>
								.awesomizer       { background-color:#00f; color:#f00; padding:0    .5em; text-transform:lowercase; font-weight:bold; }
								.awesomizer:hover { background-color:#f00; color:#00f; padding:.5em .5em; text-transform:uppercase; display:block; font-size:32pt; text-align:center; }
							</style>
							<script>								document.createElement('awesome');</script>
							What? You didn't believe me? Isn't this <span class="slidenote" title="this is an 'awesome' tag with a CSS class to style it... awesome, right?">[awesome]<awesome class="awesomizer">awesome</awesome>[/awesome]</span>!? 
							It's better than being <span class="slidenote" title="this is a 'notsoawesome' tag, which the workaround hasn't been applied to, but has the same CSS class... fail!">[notsoawesome]<notsoawesome class="awesomizer">not so awesome</notsoawesome>[/notsoawesome]</span> :'(
						</p>
						<p class="no-ielt9">I'd prove it to you, but your browser doesn't have this limitation; try using IE in the IE7 or IE8 browser mode.</p>
					</div>
					<p class="slide">
						Remember Modernizr? It solves this problem for you via the HTML5 markup styling feature I mentioned earlier.
					</p>
				</div>
			</section>
			<section id="semantics-section-code-before" class="semantics-section-code slide">
				<header><h1>Before &amp; after</h1></header>
				<div class="slide-content">
<div class="code before"><pre class="brush:xml">&lt;div id="header"&gt;...&lt;/div&gt;
&lt;div id="nav"&gt;...&lt;/div&gt;
&lt;div id="article"&gt;
	&lt;div id="section"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div id="sidebar"&gt;...&lt;/div&gt;
&lt;div id="footer"&gt;...&lt;/div&gt;</pre></div>
					<div class="slide container clearfix">
						<div><code>&lt;div id="header"&gt;</code></div>
						<div><code>&lt;div id="nav"&gt;</code></div>
						<div class="article">
							<code>&lt;div id="article"&gt;</code>
							<div><code>&lt;div id="section"&gt;</code></div>
						</div>
						<div class="sidebar"><code>&lt;div id="sidebar"&gt;</code></div>
						<div><code>&lt;div id="footer"&gt;</code></div>
					</div>
					<!-- TODO: Add note about how sections are hierarchical -->
				</div>
			</section>
			<section id="semantics-section-code-after" class="semantics-section-code slide">
				<header><h1>Before &amp; after</h1></header>
				<div class="slide-content">
<div class="code after"><pre class="brush:xml">&lt;        header &gt;...&lt;/header&gt;
&lt;        nav &gt;...&lt;/nav&gt;
&lt;        article &gt;
	&lt;        section &gt;...&lt;/section&gt;
&lt;/article&gt;
&lt;       aside    &gt;...&lt;/aside&gt;
&lt;        footer &gt;...&lt;/footer&gt;</pre></div>
					<div class="container clearfix">
						<div><code>&lt; &nbsp; &nbsp; &nbsp; &nbsp;header &gt;</code></div>
						<div><code>&lt; &nbsp; &nbsp; &nbsp; &nbsp;nav &gt;</code></div>
						<div class="article">
							<code>&lt; &nbsp; &nbsp; &nbsp; &nbsp;article &gt;</code>
							<div><code>&lt; &nbsp; &nbsp; &nbsp; &nbsp;section &gt;</code></div>
						</div>
						<div class="sidebar"><code>&lt; &nbsp; &nbsp; &nbsp; aside &nbsp; &nbsp;&gt;</code></div>
						<div><code>&lt; &nbsp; &nbsp; &nbsp; &nbsp;footer &gt;</code></div>
					</div>
					<!-- TODO: Add note about how sections are hierarchical -->
				</div>
			</section>
			<section id="semantics-section-allcode-before" class="semantics-section-allcode slide">
				<header><h1>All together, now!</h1></header>
				<div class="slide-content">
<div class="code before"><pre class="brush:xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" 
	"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
	&lt;title&gt;...&lt;/title&gt;
	&lt;link href="/css/main.css"  rel="stylesheet" type="text/css"/&gt;
	&lt;link href="/css/print.css" rel="stylesheet" type="text/css" 
	      media="print"/&gt;
	&lt;link href="/favicon.ico" rel="shortcut icon"/&gt;
	&lt;style media="screen" type="text/css"&gt;
		.warning { color: red }
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div id="header"&gt;...&lt;/div&gt;
	&lt;div id="nav"&gt;...&lt;/div&gt;
	&lt;div id="article"&gt;
		&lt;div id="section"&gt;...&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id="sidebar"&gt;...&lt;/div&gt;
	&lt;div id="footer"&gt;...&lt;/div&gt;
	...
	&lt;script src="/js/main.js" language="javascript" type="text/javascript"&gt;
	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div>
				</div>
			</section>
			<section id="semantics-section-allcode-after" class="semantics-section-allcode slide">
				<header><h1>All together, now!</h1></header>
				<div class="slide-content">
<div class="code after"><pre class="brush:xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html
	                                                    &gt;
&lt;html                                                    lang="en"&gt;
&lt;head&gt;
	&lt;meta                                               charset="utf-8"/&gt;
	&lt;title&gt;...&lt;/title&gt;
	&lt;link href="/css/main.css"  rel="stylesheet"                /&gt;
	&lt;link href="/css/print.css" rel="stylesheet" 
	      media="print"/&gt;
	&lt;link href="/favicon.ico" rel="shortcut icon"/&gt;
	&lt;style media="screen"                &gt;
		.warning { color: red }
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;        header &gt;...&lt;/header&gt;
	&lt;        nav &gt;...&lt;/nav&gt;
	&lt;        article &gt;
		&lt;        section &gt;...&lt;/section&gt;
	&lt;/article&gt;
	&lt;       aside    &gt;...&lt;/aside&gt;
	&lt;        footer &gt;...&lt;/footer&gt;
	...
	&lt;script src="/js/main.js"                                             &gt;
	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div>
				</div>
			</section>
			<section id="semantics-section-head-structure" class="slide">
				<header><h1>A quick note about headings...</h1></header>
				<div class="slide-content">
					<p>Heading tags (<code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>) imply structure</p>
<div class="slide"><pre class="brush:xml">&lt;h1&gt;Page Title&lt;h1&gt;
&lt;h2&gt;Section A&lt;h2&gt;
&lt;h3&gt;Sub-Section A1&lt;h3&gt;
&lt;h3&gt;Sub-Section A2&lt;h3&gt;
&lt;h2&gt;Section B&lt;h2&gt;</pre></div>
					<ul class="slide">
						<li>Page Title
							<ul>
								<li>Section A
									<ul>
										<li>Sub-Section A1</li>
										<li>Sub-Section A2</li>
									</ul>
								</li>
								<li>Section B</li>
							</ul>
						</li>
					</ul>
				</div>
			</section>
			<section id="semantics-section-head-html5" class="slide">
				<header><h1>A quick note about headings...</h1></header>
				<div class="slide-content">
					<p>How do you create a sub-heading for the page title?</p>
					<p class="slide">HTML5 uses scope as a convention</p>
					<div class="slide">
						<p>Here's the same outline, but in HTML5...</p>
<div class="code"><pre class="brush:xml">&lt;header&gt;
	&lt;hgroup&gt;
		&lt;h1&gt;Page Title&lt;/h1&gt;
		&lt;h2&gt;Page Subtitle&lt;/h2&gt;
	&lt;/hgroup&gt;
&lt;/header&gt;
&lt;section&gt;
	&lt;header&gt;&lt;h1&gt;Section A&lt;/h1&gt;&lt;/header&gt;
	&lt;section&gt;
		&lt;header&gt;&lt;h1&gt;Sub-Section A1&lt;/h1&gt;&lt;/header&gt;
	&lt;/section&gt;
	&lt;section&gt;
		&lt;header&gt;&lt;h1&gt;Sub-Section A2&lt;/h1&gt;&lt;/header&gt;
	&lt;/section&gt;
&lt;/section&gt;
&lt;section&gt;
	&lt;header&gt;&lt;h1&gt;Section B&lt;/h1&gt;&lt;/header&gt;
&lt;/section&gt;</pre></div>
					</div>
				</div>
			</section>
		</section>
		<section id="semantics-group" class="slide-container">
			<header id="semantics-group-tags" class="slide">
				<h1>Grouping content</h1>
				<ul class="slide-content">
					<li><code>&lt;blockquote&gt;</code></li>
					<li><code>&lt;dd&gt;</code></li>
					<li><code>&lt;dl&gt;</code></li>
					<li><code>&lt;dt&gt;</code></li>
					<li><del><code>&lt;dir&gt;</code></del></li>
					<li><code>&lt;div&gt;</code></li>
					<li><ins><code>&lt;figcaption&gt;</code></ins></li>
					<li><ins><code>&lt;figure&gt;</code></ins></li>
					<li><mark><code>&lt;hr&gt;</code></mark></li>
					<li><mark><code>&lt;li&gt;</code></mark></li>
					<li><mark><code>&lt;ol&gt;</code></mark></li>
					<li><code>&lt;p&gt;</code></li>
					<li><code>&lt;pre&gt;</code></li>
					<li><code>&lt;ul&gt;</code></li>
				</ul>
			</header>
			<section id="semantics-group-figure" class="slide">
				<header><h1>It figures...</h1></header>
				<div class="slide-content">
<div class="code"><pre class="brush:xml">
&lt;figure&gt;
	&lt;img src="awesomeness.jpg" alt="Complete awesomeness"/&gt;
	&lt;figcaption&gt;Figure 1. The Most Awesomest Photo&lt;/figcaption&gt;
&lt;/figure&gt;
</pre></div>
<div class="code slide"><pre class="brush:xml">
&lt;figure&gt;
	&lt;figcaption&gt;Listing 1. The Code for the Most Awesomest Photo&lt;/figcaption&gt;
	&amp;lt;figure&amp;gt;
		&amp;lt;img src="awesomeness.jpg" alt="Complete awesomeness"/&amp;gt;
		&amp;lt;figcaption&amp;gt;Figure 1. The Most Awesomest Photo&amp;lt;/figcaption&amp;gt;
	&amp;lt;/figure&amp;gt;
&lt;/figure&gt;
</pre></div>
				</div>
			</section>
		</section>
		<section id="semantics-text" class="slide-container">
			<header id="semantics-text-tags" class="slide">
				<h1>Text-level semantics and edits</h1>
				<ul class="slide-content">
					<li><mark><code>&lt;a&gt;</code></mark></li>
					<li><code>&lt;abbr&gt;</code></li>
					<li><del><code>&lt;acronym&gt;</code></del></li>
					<li><mark><code>&lt;b&gt;</code></mark></li>
					<li><del><code>&lt;basefont&gt;</code></del></li>
					<li><code>&lt;bdi&gt;</code></li>
					<li><code>&lt;bdo&gt;</code></li>
					<li><del><code>&lt;big&gt;</code></del></li>
					<li><code>&lt;br&gt;</code></li>
					<li><del><code>&lt;center&gt;</code></del></li>
					<li><code>&lt;cite&gt;</code></li>
					<li><code>&lt;code&gt;</code></li>
					<li><code>&lt;del&gt;</code></li>
					<li><code>&lt;dfn&gt;</code></li>
					<li><mark><code>&lt;em&gt;</code></mark></li>
					<li><del><code>&lt;font&gt;</code></del></li>
					<li><mark><code>&lt;i&gt;</code></mark></li>
					<li><code>&lt;ins&gt;</code></li>
					<li><code>&lt;kbd&gt;</code></li>
					<li><ins><code>&lt;mark&gt;</code></ins></li>
					<li><code>&lt;q&gt;</code></li>
					<li><ins><code>&lt;rp&gt;</code></ins></li>
					<li><ins><code>&lt;rt&gt;</code></ins></li>
					<li><ins><code>&lt;ruby&gt;</code></ins></li>
					<li><code>&lt;s&gt;</code></li>
					<li><code>&lt;samp&gt;</code></li>
					<li><code>&lt;small&gt;</code></li>
					<li><code>&lt;span&gt;</code></li>
					<li><del><code>&lt;strike&gt;</code></del></li>
					<li><mark><code>&lt;strong&gt;</code></mark></li>
					<li><code>&lt;sub&gt;</code></li>
					<li><code>&lt;sup&gt;</code></li>
					<li><ins><code>&lt;time&gt;</code></ins></li>
					<li><del><code>&lt;tt&gt;</code></del></li>
					<li><del><code>&lt;u&gt;</code></del></li>
					<li><code>&lt;var&gt;</code></li>
					<li><ins><code>&lt;wbr&gt;</code></ins></li>
					<li><del><code>&lt;xmp&gt;</code></del></li>
				</ul>
			</header>
			<section id="semantics-text-edit" class="slide">
				<header><h1>Editing text</h1></header>
				<div class="slide-content">
					<p>Editing via <code>contenteditable</code> attribute</p>
					<p>Check spelling via <code>spellcheck</code> attribute</p>
				</div>
			</section>
			<section id="semantics-text-semantics" class="slide">
				<header><h1>The battle for semantics</h1></header>
				<div class="slide-content">
					<!-- TODO: Should these all be mentioned on one page or separately? -->
					<!-- TODO: Should we sum up all this "semantic" talk in a footer? -->
					<ul>
						<li><code class="slidenote" title="use b when text needs to be stylistically set apart, as opposed to being more important (e.g. <b>Press Ctrl+C to copy</b>)">&lt;b&gt;</code> vs. <code class="slidenote" title="use strong when importance is critical, but it doesn't change the meaning like an emphasis would -- nest to indicate stronger importance (e.g. <strong>Warning - may spontaneously combust! Handle with care.</strong>)">&lt;strong&gt;</code></li>
						<li><code class="slidenote" title="use i when text needs to be stylistically italicized (e.g. technical term, idiomatic phrase from another language, taxonomic designation, thought, ship name, anything italicized in print)">&lt;i&gt;</code> vs. <code class="slidenote" title="use em when emphasis is key (e.g. I didn't say I <em>knew</em>, I said I <em>thought</em> I was right)">&lt;em&gt;</code></li>
						<li><code class="slidenote" title="use u when text needs to be stylistically underlined for added context, as opposed to a purely aesthetic underline, which should use CSS">&lt;u&gt;</code> vs. CSS</li>
						<li>When to use <code class="slidenote" title="not about visually smaller text; think less important (e.g. disclaimer, caveat, copyright, legal restrictions, attribution)">&lt;small&gt;</code></li>
						<li>When to use <code class="slidenote" title="use for semantic, not visual line breaks (e.g. lines in a poem)">&lt;br&gt;</code></li>
						<li>When to use <code class="slidenote" title="paragraph-level thematic break, like in a story">&lt;hr&gt;</code></li>
						<li>When to use <code class="slidenote" title="use mark to indicate content has been updated">&lt;mark&gt;</code></li>
						<li>When to use <code class="slidenote" title="use ins to indicate the addition of content">&lt;ins&gt;</code></li>
						<li><code class="slidenote" title="use s when text is inaccurate">&lt;s&gt;</code> vs. <code class="slidenote" title="use del to indicate the removal of content">&lt;del&gt;</code></li>
					</ul>
					<!-- TODO: Include something similar to this as a reference page/slide - should it be in the appendix? -->
					<p><a href="http://developers.whatwg.org/text-level-semantics.html#usage-summary">developers.whatwg.org/text-level-semantics.html#usage-summary</a></p>
				</div>
			</section>
		</section>
		<section id="semantics-embed" class="slide-container">
			<header id="semantics-embed-tags" class="slide">
				<h1>Embedded content</h1>
				<ul class="slide-content">
					<li><del><code>&lt;applet&gt;</code></del></li>
					<li><code>&lt;area&gt;</code></li>
					<li><ins><code>&lt;audio&gt;</code></ins></li>
					<li><ins><code>&lt;canvas&gt;</code></ins></li>
					<li><ins><code>&lt;embed&gt;</code></ins></li>
					<li><del><code>&lt;frame&gt;</code></del></li>
					<li><del><code>&lt;frameset&gt;</code></del></li>
					<li><mark><code>&lt;iframe&gt;</code></mark></li>
					<li><code>&lt;img&gt;</code></li>
					<li><code>&lt;map&gt;</code></li>
					<li><del><code>&lt;noframes&gt;</code></del></li>
					<li><code>&lt;object&gt;</code></li>
					<li><code>&lt;param&gt;</code></li>
					<li><ins><code>&lt;source&gt;</code></ins></li>
					<li><ins><code>&lt;svg&gt;</code></ins></li>
					<li><ins><code>&lt;track&gt;</code></ins></li>
					<li><ins><code>&lt;video&gt;</code></ins></li>
				</ul>
			</header>
			<section id="semantics-embed-sandbox" class="slide">
				<header><h1>Sandbox</h1></header>
				<div class="slide-content">
					<p>Applies security restrictions to <code>&lt;iframe&gt;</code> elements</p>
					<div class="code"><pre class="brush:xml">&lt;iframe src="untrusted.html" sandbox="sandbox"/&gt;</pre></div>
					<ul>
						<li>Disable plugins</li>
						<li>Block script execution (<code>allow-scripts</code>)</li>
						<li>Block form submission (<code>allow-forms</code>)</li>
						<li>Restrict <span class="slidenote" title="e.g. Local Storage, XMLHttpRequest, and DOM access">APIs which require same-origin</span> (<code>allow-same-origin</code>)</li>
						<li>Block external link targets (<code>allow-top-navigation</code>)</li>
						<li>Block popup windows (<code>ms-allow-popups</code>)</li>
					</ul>
					<div class="slide">
						<p>Can also lift some restrictions</p>
						<div class="code"><pre class="brush:xml">&lt;iframe src="untrusted.html" sandbox="allow-scripts allow-forms"/&gt;</pre></div>
					</div>
				</div>
			</section>
		</section>
		<section id="semantics-table" class="slide-container">
			<header id="semantics-table-tags" class="slide">
				<h1>Tabular data</h1>
				<ul class="slide-content">
					<li><code>&lt;caption&gt;</code></li>
					<li><code>&lt;col&gt;</code></li>
					<li><code>&lt;colgroup&gt;</code></li>
					<li><code>&lt;table&gt;</code></li>
					<li><code>&lt;tbody&gt;</code></li>
					<li><code>&lt;td&gt;</code></li>
					<li><code>&lt;tfoot&gt;</code></li>
					<li><code>&lt;th&gt;</code></li>
					<li><code>&lt;thead&gt;</code></li>
					<li><code>&lt;tr&gt;</code></li>
				</ul>
			</header>
		</section>
		<section id="semantics-forms" class="slide-container">
			<header id="semantics-forms-tags" class="slide">
				<h1>Forms</h1>
				<ul class="slide-content">
					<li><code>&lt;button&gt;</code></li>
					<li><ins><code>&lt;datalist&gt;</code></ins></li>
					<li><code>&lt;fieldset&gt;</code></li>
					<li><code>&lt;form&gt;</code></li>
					<li><mark><code>&lt;input&gt;</code></mark></li>
					<li><ins><code>&lt;keygen&gt;</code></ins></li>
					<li><code>&lt;label&gt;</code></li>
					<li><code>&lt;legend&gt;</code></li>
					<li><ins><code>&lt;meter&gt;</code></ins></li>
					<li><code>&lt;optgroup&gt;</code></li>
					<li><code>&lt;option&gt;</code></li>
					<li><ins><code>&lt;output&gt;</code></ins></li>
					<li><ins><code>&lt;progress&gt;</code></ins></li>
					<li><code>&lt;select&gt;</code></li>
					<li><code>&lt;textarea&gt;</code></li>
				</ul>
			</header>
			<section id="semantics-forms-inputtypes" class="slide">
				<header><h1>New &lt;input&gt; types</h1></header>
				<ul class="slide-content">
					<li><code>button</code></li>
					<li><code>checkbox</code></li>
					<li><ins><code class="slidenote" title="shows color picker, RGB value in hex - differs by browser">color</code></ins></li>
					<li><ins><code class="slidenote" title="shows date picker (calendar)">date</code></ins></li>
					<li><ins><code class="slidenote" title="shows date and time pickers (calendar and clock)">datetime</code></ins></li>
					<li><ins><code class="slidenote" title="same as 'datetime', but in local time zone">datetime-local</code></ins></li>
					<li><ins><code class="slidenote" title="validates email address, tells virtual keyboards to use email-input mode">email</code></ins></li>
					<li><code>file</code></li>
					<li><code>hidden</code></li>
					<li><code>image</code></li>
					<!-- TODO: Validate what is shown in all major browsers -->
					<li><ins><code class="slidenote" title="shows month picker - some use calendar, others use drop-down">month</code></ins></li>
					<li><ins><code class="slidenote" title="shows numeric up/down spinner, validates numbers, tells virtual keyboards to use numeric-input mode (w/ min, max, and step attributes)">number</code></ins></li>
					<li><code>password</code></li>
					<li><code>radio</code></li>
					<li><ins><code class="slidenote" title="shows range slider (w/ min, max, and step attributes)">range</code></ins></li>
					<li><code>reset</code></li>
					<li><ins><code class="slidenote" title="shows textbox targeted at search">search</code></ins></li>
					<li><code>submit</code></li>
					<li><ins><code class="slidenote" title="validates phone number, tells virtual keyboards to use phone-input mode">tel</code></ins></li>
					<li><code>text</code></li>
					<li><ins><code class="slidenote" title="shows time picker (clock)">time</code></ins></li>
					<li><ins><code class="slidenote" title="validates URL, tells virtual keyboard to use URL-input mode">url</code></ins></li>
					<!-- TODO: Validate what is shown in all major browsers -->
					<li><ins><code class="slidenote" title="shows week picker (calendar)">week</code></ins></li>
				</ul>
			</section>
			<section id="semantics-forms-inputtypes-color" class="semantics-forms-inputtypes slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>A horse of a different color</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<pre class="brush:xml">&lt;input type="color"&gt;</pre>
					<div class="slide">
						<p class="demo"><input type="color"/></p>
						<div class="no-inputcolor">
							<p>Sadly, you don't have support for this</p>
							<p>Here's what it looks like in Opera...</p>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-color-opera.png" alt="&lt;input type='color'&gt; in Opera"/>
								<figcaption>&lt;input type="color"&gt; in Opera</figcaption>
							</figure>
						</div>
					</div>
				</div>
			</section>
			<section id="semantics-forms-inputtypes-datetime" class="semantics-forms-inputtypes slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>Would you date me?</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<div class="code"><pre class="brush:xml">&lt;input type="date"&gt;
&lt;input type="time"&gt;
&lt;input type="datetime"&gt;
&lt;input type="datetime-local"&gt;
&lt;input type="month"&gt;
&lt;input type="week"&gt;</pre></div>
					<div class="slide">
						<p class="demo">
							<label>Date + Time</label><input type="date"/>&nbsp;&nbsp;+&nbsp;&nbsp;<input type="time"/><br/>
							<label>Date/Time (UTC) + Local</label><input type="datetime"/>&nbsp;&nbsp;+&nbsp;&nbsp;<input type="datetime-local"/><br/>
							<label>Month + Week</label><input type="month"/>&nbsp;&nbsp;+&nbsp;&nbsp;<input type="week"/>
						</p>
						<div class="no-inputdatetime">
							<p class="webkit">Chrome only has partial support for this</p>
							<p class="no-webkit">Sadly, you don't have support for this</p>
							<p>Here's what <code>datetime</code> looks like in <span class="no-webkit">Chrome and </span>Opera...</p>
							<figure class="no-webkit">
								<img src="../content/images/semantics-forms-inputtypes-datetime-chrome.png" alt="&lt;input type='datetime'&gt; in Chrome"/>
								<figcaption>&lt;input type="datetime"&gt; in Chrome</figcaption>
							</figure>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-datetime-opera.png" alt="&lt;input type='datetime'&gt; in Opera"/>
								<figcaption>&lt;input type="datetime"&gt; in Opera</figcaption>
							</figure>
						</div>
					</div>
				</div>
			</section>
			<section id="semantics-forms-inputtypes-email" class="semantics-forms-inputtypes slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>Must...check...email...</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<pre class="brush:xml">&lt;input type="email"&gt;</pre>
					<div class="slide">
						<p class="demo"><input type="email"/></p>
						<p>Email renders as a normal textbox, but includes validation and optimized virtual keyboards</p>
						<p class="no-inputemail">Sadly, you don't have support for this</p>
						<!-- TODO: Check to see if the user is on an iphone/ipod -->
						<div class="no-iphone">
							<p>Here's what it looks like on Safari for iPhone and iPod...</p>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-email-iphone.png" alt="&lt;input type='email'&gt; in Safari for iPhone and iPod"/>
								<figcaption>&lt;input type="email"&gt; in Safari for iPhone and iPod</figcaption>
							</figure>
						</div>
					</div>
				</div>
			</section>
			<section id="semantics-forms-inputtypes-number" class="semantics-forms-inputtypes slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>Let me get them digits...</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<pre class="brush:xml">&lt;input type="number" 
       min="0" max="100" step="2"&gt;</pre>
					<div class="slide">
						<p class="demo"><input type="number" min="0" max="100" step="2"/></p>
						<div class="no-inputnumber">
							<p class="inputnumber msie">IE10 PP2 only has partial support (no domain up/down controls)</p>
							<p class="no-inputnumber">Sadly, you don't have support for this</p>
							<p>Here's what it looks like in Chrome<span class="no-inputnumber">, IE10 PP2,</span> and Opera...</p>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-number-chrome.png" alt="&lt;input type='number'&gt; in Chrome"/>
								<figcaption>&lt;input type="number"&gt; in Chrome</figcaption>
							</figure>
							<figure class="no-inputnumber">
								<img src="../content/images/semantics-forms-inputtypes-number-ie10pp2.png" alt="&lt;input type='number'&gt; in IE10 PP2"/>
								<figcaption>&lt;input type="number"&gt; in IE10 PP2</figcaption>
							</figure>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-number-opera.png" alt="&lt;input type='number'&gt; in Opera"/>
								<figcaption>&lt;input type="number"&gt; in Opera</figcaption>
							</figure>
						</div>
					</div>
				</div>
			</section>
			<section id="semantics-forms-inputtypes-range" class="semantics-forms-inputtypes slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>An interesting a-range-ment...</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<pre class="brush:xml">&lt;input type="range"
       min="0" max="100" step="2"&gt;</pre>
					<div class="slide">
						<p class="demo"><input type="range" min="0" max="100" step="2"/></p>
						<div class="no-inputrange">
							<p>Sadly, you don't have support for this</p>
							<p>Here's what it looks like in Chrome and Opera...</p>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-range-chrome.png" alt="&lt;input type='range'&gt; in Chrome"/>
								<figcaption>&lt;input type="range"&gt; in Chrome</figcaption>
							</figure>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-range-opera.png" alt="&lt;input type='range'&gt; in Opera"/>
								<figcaption>&lt;input type="range"&gt; in Opera</figcaption>
							</figure>
						</div>
					</div>
				</div>
			</section>
			<section id="semantics-forms-inputtypes-search" class="semantics-forms-inputtypes slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>Searching for love in all the wrong places</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<pre class="brush:xml">&lt;input type="search"&gt;</pre>
					<div class="slide">
						<p class="demo"><input type="search"/></p>
						<div>
							<p class="no-inputsearch">Sadly, you don't have support for this, but that's okay</p>
							<p>The search input type is purely semantic and aesthetic</p>
						</div>
					</div>
				</div>
			</section>
			<section id="semantics-forms-inputtypes-tel" class="semantics-forms-inputtypes slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>ET phone home</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<pre class="brush:xml">&lt;input type="tel"&gt;</pre>
					<div class="slide">
						<p class="demo"><input type="tel"/></p>
						<p><code>tel</code> renders as a normal textbox, but includes validation and optimized virtual keyboards</p>
						<p class="no-inputtel">Sadly, you don't have support for this</p>
						<!-- TODO: Check to see if the user is on an iphone/ipod -->
						<!-- TODO: Get screenshot for iphone/ipod -->
						<!--div class="no-iphone">
							<p>Here's what it looks like on Safari for iPhone and iPod...</p>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-tel-iphone.png" alt="&lt;input type='tel'&gt; in Safari for iPhone and iPod"/>
								<figcaption>&lt;input type="tel"&gt; in Safari for iPhone and iPod</figcaption>
							</figure>
						</div-->
					</div>
				</div>
			</section>
			<section id="semantics-forms-inputtypes-url" class="semantics-forms-inputtypes slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>A link to the past</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<pre class="brush:xml">&lt;input type="url"&gt;</pre>
					<div class="slide">
						<p class="demo"><input type="url"/></p>
						<p><code>url</code> renders as a normal textbox, but includes validation and optimized virtual keyboards</p>
						<p class="no-inputurl">Sadly, you don't have support for this</p>
						<!-- TODO: Check to see if the user is on an iphone/ipod -->
						<div class="no-iphone">
							<p>Here's what it looks like on Safari for iPhone and iPod...</p>
							<figure>
								<img src="../content/images/semantics-forms-inputtypes-url-iphone.png" alt="&lt;input type='url'&gt; in Safari for iPhone and iPod"/>
								<figcaption>&lt;input type="url"&gt; in Safari for iPhone and iPod</figcaption>
							</figure>
						</div>
					</div>
				</div>
			</section>
			<section id="semantics-forms-inputtypes-mod" class="slide">
				<header>
					<hgroup>
						<h1>New &lt;input&gt; types</h1>
						<h2>...with Modernizr</h2>
					</hgroup>
				</header>
				<div class="slide-content">
<div class="code"><pre class="brush:js">if (Modernizr.inputtypes.email) { ... }
if (Modernizr.inputtypes['datetime-local']) { ... }</pre></div>
					<!-- TODO: Add information about the new object properties/methods -->
					<!-- TODO: Find fallbacks for each -->
				</div>
			</section>
			<section id="semantics-forms-datalist" class="slide">
				<header><h1>&lt;datalist&gt;</h1></header>
				<div class="slide-content">
					<p>List of options for an <code>&lt;input&gt;</code> element &ndash; think combobox</p>
<div class="code"><pre class="brush:xml">&lt;label for="awesomeness"&gt;Where do you get the awesomest HTML5 info?&lt;/label&gt;
&lt;input name="awesomeness" list="html5-training"/&gt;
&lt;datalist id="html5-training"&gt;
	&lt;option value="HTML5 Today" /&gt;
	&lt;option value="W3C" /&gt;
	&lt;option value="WHATWG" /&gt;
&lt;/datalist&gt;</pre></div>
					<div class="slide">
						<p class="demo">
							<label for="awesomeness">What is the most awesomest HTML5 training resource?</label>
							<input name="awesomeness" list="html5-training"/>
							<datalist id="html5-training">
								<option value="HTML5 Today" />
								<option value="W3C" />
								<option value="WHATWG" />
							</datalist>
						</p>
						<p class="no-datalist">Sadly, you don't have support for this</p>
						<!-- TODO: Add detection/fallback options -->
					</div>
				</div>
				<!-- TODO: Find fallback -->
			</section>
			<section id="semantics-forms-keygen" class="slide">
				<header><h1>&lt;keygen&gt;</h1></header>
				<div class="slide-content">
					<p>Secure way to authenticate users</p>
					<p>Stores private key in local (client) keystore; public key is sent to server</p>
<div class="code"><pre class="brush:xml">&lt;label for="key"&gt;Encryption:&lt;/label&gt;
&lt;keygen name="key"/&gt;</pre></div>
					<div class="slide">
						<p class="demo"><label for="key">Encryption:</label> <keygen name="key"/></p>
						<p class="no-keygen">Sadly, you don't have support for this</p>
						<!-- TODO: Add detection/fallback options -->
					</div>
				</div>
			</section>
			<section id="semantics-forms-output" class="slide">
				<header><h1>&lt;output&gt;</h1></header>
				<div class="slide-content">
					<p>Result of some calculation</p>
<div class="code"><pre class="brush:xml">&lt;input id="base" type="number"/&gt;
^ &lt;input id="exp" type="number"/&gt; 
= &lt;output onforminput="..."/&gt;</pre></div>
					<p>...but it's not just for direct output</p>
					<div class="slide">
						<p class="demo"><input id="base" type="number"/> ^ <input id="exp" type="number"/> = <output onforminput="this.value = Math.pow(Number($('#base').val()), Number($('#exp').val()))"/></p>
						<p class="no-output">Sadly, you don't have support for this</p>
						<!-- TODO: Add detection/fallback options -->
					</div>
				</div>
			</section>
			<section id="semantics-forms-meter" class="slide">
				<header><h1>&lt;meter&gt; and &lt;progress&gt;</h1></header>
				<div class="slide-content">
					<p>The same, but different</p>
					<p>Both show status within a known numeric range</p>
<div class="code"><pre class="brush:xml">&lt;meter min="1" low="2" value="3" high="4" max="5"&gt;
	&lt;span class="meter"&gt;60%&lt;/span&gt;
&lt;/progress&gt;
&lt;progress value="3" max="10"&gt;
	&lt;span class="progress"&gt;30%&lt;/span&gt;
&lt;/progress&gt;</pre></div>
					<p><em>Always</em> show progress with <code>&lt;progress&gt;</code></p>
					<div class="slide">
						<p class="demo">
							<meter min="1" low="2" value="3" high="4" max="5">60%</meter>
							<progress value="3" max="10">30%</progress>
						</p>
						<p class="no-meter no-progress">Sadly, you don't have support for &lt;meter&gt; or &lt;progress&gt;</p>
						<p class="no-meter progress">Sadly, you don't have support for &lt;meter&gt;</p>
						<p class="meter no-progress">Sadly, you don't have support for &lt;progress&gt;</p>
						<!-- TODO: Add detection/fallback options -->
					</div>
				</div>
				<!-- TODO: Find fallbacks for each -->
			</section>
			<section id="semantics-forms-attributes" class="slide">
				<header>
					<hgroup>
						<h1>New form attributes</h1>
						<h2>Applies to &lt;input&gt;, &lt;select&gt;, and &lt;textarea&gt;</h2>
					</hgroup>
				</header>
				<!-- TODO: Determine if this works on any of the other elements (e.g. keygen) - probably not on the others -->
				<ul class="slide-content">
					<li><code>aria-required</code></li>
					<li><code>autocomplete</code></li>
					<li><code>autofocus</code></li>
					<li><code>form</code></li>
					<li><code>formaction</code></li>
					<li><code>formenctype</code></li>
					<li><code>formmethod</code></li>
					<li><code>formnovalidate</code></li>
					<li><code>formtarget</code></li>
					<li><code>list</code></li>
					<li><code>max</code></li>
					<li><code>min</code></li>
					<li><code>multiple</code></li>
					<li><code>pattern</code></li>
					<li><code>placeholder</code></li>
					<li><code>readonly</code></li>
					<li><code>required</code></li>
					<li><code>step</code></li>
				</ul>
				<!-- TODO: Add detection/fallback options -->
			</section>
			<section id="semantics-forms-valid" class="slide">
				<header>
					<hgroup>
						<h1>New validation styling</h1>
						<h2>Applies to &lt;input&gt;, &lt;select&gt;, and &lt;textarea&gt;</h2>
					</hgroup>
				</header>
				<!-- TODO: Determine if this works on any of the other elements (e.g. keygen) - probably not on the others -->
				<ul class="slide-content">
					<li><code>:valid</code> / <code>:invalid</code></li>
					<li><code>:required</code> / <code>:optional</code></li>
					<li><code>:in-range</code> / <code>:out-of-range</code></li>
					<li><code>:read-only</code> / <code>:read-write</code></li>
				</ul>
				<!-- TODO: Add detection/fallback options -->
			</section>
		</section>
		<section id="semantics-interact" class="slide-container">
			<header id="semantics-interact-tags" class="slide">
				<h1>Interactive elements</h1>
				<ul class="slide-content">
					<li><ins><code>&lt;details&gt;</code></ins></li>
					<li><ins><code>&lt;command&gt;</code></ins></li>
					<li><code>&lt;menu&gt;</code></li>
					<li><ins><code>&lt;summary&gt;</code></ins></li>
				</ul>
			</header>
			<section id="semantics-interact-details" class="slide">
				<header><h1>&lt;details&gt; and &lt;summary&gt;</h1></header>
				<div class="slide-content">
					<p>Contextual information about the parent element</p>
					<p>Renders as collapsable region</p>
<pre class="brush:xml">&lt;details open="true"&gt;
&lt;summary&gt;...&lt;/summary&gt;
...
&lt;/details&gt;</pre>
					<div class="slide">
						<p class="demo"><details open="true"><summary><p class="demo">This is the summary...</p></summary><p class="demo">And these are the details...</p></details></p>
						<p class="no-details">Sadly, you don't have support for this</p>
						<!-- TODO: Add detection/fallback options -->
					</div>
				</div>
			</section>
			<section id="semantics-interact-menu" class="slide">
				<header><h1>&lt;menu&gt; and &lt;command&gt;</h1></header>
				<div class="slide-content">
					<p>Context menu, toolbar, or general list of commands</p>
					<!-- TODO: Change this code block to use media queries and align the text properly based on the available screen width instead of forcing a skinny column -->
<div class="code"><pre class="brush:xml">&lt;menu type="context"&gt;
	&lt;menu label="File"&gt;
		&lt;command type="command" accesskey="n" label="New..." 
		         icon="/img/new.png" onclick="/new"/&gt;
		&lt;command type="command" accesskey="s" label="Save" 
		         icon="/img/save.png" onclick="..."/&gt;
		&lt;hr/&gt;
		&lt;command type="command" accesskey="p" label="Print..." 
		         icon="/img/print.png" onclick="..."/&gt;
	&lt;/menu&gt;
	&lt;menu label="Help"&gt;
		&lt;command type="command" accesskey="a" label="About" 
		         icon="/img/about.png" onclick="/about"/&gt;
	&lt;/menu&gt;
&lt;/menu&gt;</pre></div>
					<p>In a menu, <code>&lt;command&gt;</code> is an abstract concept &ndash; <code>&lt;li&gt;</code> and other form elements can be used in its place</p>
					<p>Can also use <code>&lt;command&gt;</code> on its own to indicate a keyboard shortcut</p>
					<div class="slide">
						<!-- TODO: Add links to valid images -->
						<p class="demo">
							<menu type="context">
								<menu label="File">
									<command type="command" accesskey="n" label="New..." icon="/img/new.png" onclick="window.open('index.htm')"/>
									<command type="command" accesskey="s" label="Save" icon="/img/save.png" onclick="alert('saved!')"/>
									<hr/>
									<command type="checkbox" label="Read Only" icon="/img/locked.png" onclick="alert('locked!')"/>
									<hr/>
									<command type="command" accesskey="p" label="Print..." icon="/img/print.png" onclick="window.print()"/>
								</menu>
								<menu label="View">
									<command type="radio" radiogroup="view-mode" accesskey="b" label="Basic" icon="/img/basic.png" onclick="alert('switched to basic mode')"/>
									<command type="radio" radiogroup="view-mode" accesskey="a" label="Advanced" icon="/img/advanced.png" onclick="alert('switched to advanced mode')"/>
								</menu>
								<menu label="Help">
									<command type="command" accesskey="a" label="About" icon="/img/about.png" onclick="alert('there is no help! mwuahahahahaaa!')"/>
								</menu>
							</menu>
						</p>
						<p class="no-menu">Sadly, you don't have support for this</p>
						<!-- TODO: Add detection/fallback options -->
					</div>
				</div>
			</section>
		</section>
		<section id="semantics-link" class="slide-container">
			<header id="semantics-link-tags" class="slide">
				<!-- TODO: What's the difference between this section and the <a> and <area> in the text/embed sections above? -->
				<!-- TODO: Is there anything special to talk about here? If not, should the tags be marked as updated? -->
				<h1>Linking elements</h1>
				<div class="slide-content">
					<ul>
						<li><mark><code>&lt;a&gt;</code></mark></li>
						<li><mark><code>&lt;area&gt;</code></mark></li>
					</ul>
					<p>Same relationship semantics apply as with <code>&lt;link&gt;</code></p>
					<p>No longer limited to inline elements</p>
				</div>
			</header>
		</section>
		<section id="semantics-drag" class="slide-container">
			<div class="slide">
				<header><h1>Drag &amp; drop</h1></header>
				<div class="slide-content">
					<!-- TODO: Add code example -->
					<p>Activated via the <code>draggable</code> attribute</p>
					<p>Handle <code>dragenter</code>, <code>dragover</code>, and <code>drop</code> events</p>
				</div>
			</div>
		</section>
		<section id="semantics-extend" class="slide-container">
			<!-- TODO: I like the transition for a presentation, but I don't want this to be an overview of what's to come -->
			<!-- TODO: Should this wrap up all the semantic markup and tease RDFa/Microdata/Microformats? The latter three are all related -->
			<header id="semantics-extend-intro" class="slide">
				<h1>But wait, there's more!</h1>
				<div class="slide-content">
					<p>How do you integrate with a web system that doens't offer services?</p>
					<ul class="slide">
						<li>RDFa</li>
						<li>Microformats</li>
						<li>Microdata</li>
					</ul>
					<p class="slide">To really understand the differences, let's take a look at a real-world example.</p>
				</div>
			</header>
			<section id="semantics-extend-source" class="slide">
				<header><h1>Original snippet</h1></header>
				<div class="slide-content">
					<!-- TODO: Find a better way to show the changes -->
<div class="code"><pre class="brush:xml">&lt;div&gt;
	&lt;div&gt;Microsoft Corporation&lt;/div&gt;
	&lt;div&gt;
		&lt;span&gt;One Microsoft Way&lt;/span&gt;&lt;br/&gt;
		&lt;span&gt;Redmond&lt;/span&gt;, 
		&lt;abbr title="Washington"&gt;WA&lt;/abbr&gt;, 
		&lt;span&gt;USA&lt;/span&gt; 
		&lt;span&gt;98052-7329&lt;/span&gt;
	&lt;/div&gt;
	&lt;div&gt;Tel: (425) 882-8080&lt;/div&gt;
	&lt;div&gt;Fax: (425) 706-7329&lt;/div&gt;
	&lt;div&gt;&lt;a href="http://www.microsoft.com"&gt;http://www.microsoft.com&lt;/a&gt;&lt;div&gt;
&lt;/div&gt;</pre></div>
				</div>
			</section>
			<section id="semantics-extend-rdfa" class="slide">
				<header><h1>RDFa</h1></header>
				<!-- TODO: Is there a specific tag for fax numbers in the Google RDFa schema for organizations? -->
				<div class="slide-content">
<div class="code"><pre class="brush:xml">&lt;div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Organization"&gt;
	&lt;div property="v:name"&gt;Microsoft Corporation&lt;/div&gt;
	&lt;div rel="v:address"&gt;
		&lt;div typeof="v:Address"&gt;
			&lt;span property="v:street-address"&gt;One Microsoft Way&lt;/span&gt;&lt;br/&gt;
			&lt;span property="v:locality"&gt;Redmond&lt;/span&gt;, 
			&lt;abbr property="v:region" title="Washington"&gt;WA&lt;/abbr&gt;, 
			&lt;span property="v:country-name"&gt;USA&lt;/span&gt; 
			&lt;span property="postal-code"&gt;98052-7329&lt;/span&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div&gt;Tel: &lt;span property="v:tel"&gt;(425) 882-8080&lt;/span&gt;&lt;/div&gt;
	&lt;div&gt;Fax: &lt;span property="v:tel"&gt;(425) 706-7329&lt;/span&gt;&lt;/div&gt;
	&lt;div&gt;&lt;a href="http://www.microsoft.com" rel="v:url"&gt;http://www.microsoft.com&lt;/a&gt;&lt;div&gt;
&lt;/div&gt;</pre></div>
				</div>
			</section>
			<section id="semantics-extend-microformats" class="slide">
				<header><h1>Microformats</h1></header>
				<div class="slide-content">
<div class="code"><pre class="brush:xml">&lt;div class="vcard"&gt;
	&lt;div class="fn org"&gt;Microsoft Corporation&lt;/div&gt;
	&lt;div class="adr"&gt;
		&lt;span class="street-address"&gt;One Microsoft Way&lt;/span&gt;&lt;br/&gt;
		&lt;span class="locality"&gt;Redmond&lt;/span&gt;, 
		&lt;abbr class="region" title="Washington"&gt;WA&lt;/abbr&gt;, 
		&lt;span class="country-name"&gt;USA&lt;/span&gt; 
		&lt;span class="postal-code"&gt;98052-7329&lt;/span&gt;
	&lt;/div&gt;
	&lt;div&gt;&lt;span class="type"&gt;Tel:&lt;/span&gt; (425) 882-8080&lt;/div&gt;
	&lt;div&gt;&lt;span class="type"&gt;Fax:&lt;/span&gt; (425) 706-7329&lt;/div&gt;
	&lt;div&gt;&lt;a class="url" href="http://www.microsoft.com"&gt;http://www.microsoft.com&lt;/a&gt;&lt;div&gt;
&lt;/div&gt;</pre></div>
				</div>
			</section>
			<section id="semantics-extend-microdata" class="slide">
				<header><h1>Microdata</h1></header>
				<div class="slide-content">
<div class="code"><pre class="brush:xml">&lt;div itemscope="itemscope" itemtype="http://schema.org/Corporation"&gt;
	&lt;div itemprop="name"&gt;Microsoft Corporation&lt;/div&gt;
	&lt;div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress"&gt;
		&lt;span itemprop="streetAddress"&gt;One Microsoft Way&lt;/span&gt;&lt;br/&gt;
		&lt;span itemprop="addressLocality"&gt;Redmond&lt;/span&gt;, 
		&lt;abbr itemprop="addressRegion" title="Washington"&gt;WA&lt;/abbr&gt;, 
		&lt;span itemprop="addressCountry"&gt;USA&lt;/span&gt; 
		&lt;span itemprop="postalCode"&gt;98052-7329&lt;/span&gt;
	&lt;/div&gt;
	&lt;div&gt;Tel: &lt;span itemprop="telephone"&gt;(425) 882-8080&lt;/span&gt;&lt;/div&gt;
	&lt;div&gt;Fax: &lt;span itemprop="faxNumber"&gt;(425) 706-7329&lt;/span&gt;&lt;/div&gt;
	&lt;div&gt;&lt;a href="http://www.microsoft.com"&gt;http://www.microsoft.com&lt;/a&gt;&lt;div&gt;
&lt;/div&gt;</pre></div>
				</div>
			</section>
			<footer id="semantics-extend-summary" class="slide">
				<h1>It's a micro battle royale!</h1>
				<div class="slide-content">
					<p>Differneces are minimal</p>
					<p>Microformats definitely the smallest</p>
					<p>Microdata arguably has the brightest future</p>
					<p>Microsoft, Google, and Yahoo chose Microdata &ndash; <a href="http://schema.org">schema.org</a></p>
					<p>Look at your community to guide your decision</p>
				</div>
			</footer>
		</section>
		<footer id="semantics-footer" class="slide-container">
			<div id="semantics-footer-summary" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Tools...</h2>
					<ul>
						<li><a href="http://modernizr.com">Modernizr</a></li>
						<li><a href="http://code.google.com/p/html5shiv">html5shim</a></li>
					</ul>
					<h2>References...</h2>
					<ul>
						<li><a href="http://html5doctor.com/outlines">html5doctor.com/outlines</a> &ndash; discussion about how structure is implied</li>
						<li><a href="http://schema.org">schema.org</a> &ndash; collaboration between Bing, Google, and Yahoo! to promote Microdata</li>
						<li><a href="http://microformats.org">microformats.org</a></li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/EXT19">Microformats and Semantic Markup (Mix11)</a></li>
						<li><a href="http://code.google.com/webstats">code.google.com/webstats</a> &ndash; most used ids/classes</li>
					</ul>
				</div>
			</div>
		</footer>
	</article>


	<article id="offstore">
		<header id="offstore-intro" class="slide-container">
			<div class="slide">
				<h1>Offline &amp; Storage</h1>
				<div class="slide-content">
					<blockquote cite="http://w3.org/html/logo">
						<p>
							Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 
							App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
						</p>
						<div class="author">W3C</div>
					</blockquote>
				</div>
			</div>
		</header>
		<section id="offstore-appcache" class="slide-container">
			<header id="offstore-appcache-about" class="slide">
				<h1>Application cache</h1>
				<div class="slide-content">
					<p>Save app code offline with a manifest file</p>
					<!-- TODO: <span class="slidenote" title="this line must be exact">CACHE MANIFEST</span> -->
					<!-- TOOD: <span class="slidenote" title="default section, all files cached">CACHE:</span> -->
					<!-- TOOD: <span class="slidenote" title="prefer online, but fallback to offline, if not available">FALLBACK:</span> -->
					<!-- TODO: This was the example in the spec, but wouldn't it be an error for JS/CSS/image files? Can '/' be a pattern? -->
					<!-- TOOD: <span class="slidenote" title="if any resource fails, get the 'offline.html' file">/ /offline.html</span> -->
					<!-- TOOD: <span class="slidenote" title="never cache these files">NETWORK:</span> -->
					<!-- TOOD: <span class="slidenote" title="everything should be online">*</span> -->
					<!-- TODO: Is there already a library that can generate these via .ashx? It wouldn't be hard... -->
					<div class="code"><pre class="brush:xml">&lt;html lang="en" manifest="/offline.appcache"&gt;</pre></div>
					<div class="slide">
						<p>Tell the browser about your content</p>
<div class="code"><pre class="brush:xml">CACHE MANIFEST
CACHE:
index.html
about.html
main.css
main.js
jquery.min.js

FALLBACK:
/ /offline.html

NETWORK:
*</pre></div>
					</div>
					<p class="slide">
						That's it! 
						<span class="no-applicationcache">...but your browser doesn't support it :(</span>
						<span class="applicationcache">...and your browser supports it! :)</span>
					</p>
				</div>
			</header>
			<section id="offstore-appcache-warning" class="slide">
				<header>
					<hgroup>
						<h1>Application cache</h1>
						<h2>A word (or three) of warning...</h2>
					</hgroup>
				</header>
				<div class="slide-content">
					<p>Web server <em>must</em> serve files as <code>text/cache-manifest</code></p>
					<p class="slide">All files re-downloaded when manifest changes</p>
					<p class="slide">May want to consider separate manifests for separate sections <span class="newline slide">...but watch for overlaps!</span></p>
					<!-- TODO: Test dependant manifests (e.g. index.htm(manifest=[about.htm,...]), about.htm(manifest=[photo.png,...]) -->
					<!-- TODO: If dependant manifests are supported, what happens when there are overlaps? -->
				</div>				
			</section>
			<footer id="offstore-appcache-footer" class="slide">
				<!-- TODO: Need a way to bring all the related pages together (consistent h1 or watermark? with browser support?) -->
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.applicationcache) { ... }</pre>
					<h2>Fallback options...</h2>
					<ul>
						<!-- TODO: Add note about deprecated Gears -->
						<li><a href="http://code.google.com/p/html5-gears">HTML5 Gears</a> &ndash; requires Google Gears browser plugin</li>
						<li>
							Or, do it yourself &ndash; 
							<a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a>, 
							<a href="http://www.silverlight.net/learn/graphics/file-and-local-data/isolated-storage-(silverlight-quickstart)">Silverlight Isolated Storage</a>
						</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-376T">Building offline access in Metro style apps and websites using HTML5 (Build)</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="offstore-storage" class="slide-container">
			<header id="offstore-storage-about" class="slide">
				<h1>Web Storage</h1>
				<div class="slide-content">
					<!-- TODO: Add check to see if web storage is available - Modernizr.localstorage + Modernizr.sessionstorage -->
					<!-- TODO: I don't like these examples; we should standardize how and what to show for all APIs -->
					<!-- TODO: Show .clear(), window.storage event (w/ jQuery), and event args (key, oldValue, newValue, url, storageArea)? -->
					<p>Local and session storage for string values</p>
					<p class="newline">Local persistent and available across browser sessions</p>
					<p class="newline">Session limited to current session</p>
					<p class="slide">Beware new windows/tabs in the same session!</p>
					<div class="slide">
						<p>Consider serialization for complex data</p>
						<p class="newline">e.g. <code>JSON.stringify()</code> and <code>JSON.parse()</code></p>
						<p class="newline">...but be cognizant of security concerns!</p>
					</div>
					<p class="slide">W3C <em>recommends</em> 5MB limit per domain <span class="newline">...will likely differ by browser</span></p>
				</div>
			</header>
			<section id="offstore-storage-code" class="slide">
				<header><h1>Web Storage</h1></header>
				<div class="slide-content">
					<!-- TODO: Add code sample using JSON storage -->
<div class="code"><pre class="brush:js">if (Modernizr.localstorage){
	var p = window.localStorage.getItem(key);
	p = (p == null) ? getDefaultPrefs() : p;
	...
	window.localStorage.removeItem(key);
	...
	window.localStorage.setItem(key, value);
}</pre></div>
					<div class="slide">
						<p>Can also use standard dictionary accessors</p>
						<!-- TODO: Add window.localStorage.prefs as JavaScript Ninja Tip -->
<div class="code"><pre class="brush:js">var exists = 'prefs' in window.localStorage,
	getAsDict = window.localStorage['prefs'],
	getAsProp = window.localStorage.prefs;
...
window.localStorage.prefs = newPrefs;
window.localStorage['prefs'] = newPrefs;</pre></div>
					</div>
					<p class="slide">Same available for <code>window.sessionStorage</code></p>
					<div class="slide">
						<p class="no-localstorage">But, unfortunately, your browser doesn't support it :(</p>
						<p class="localstorage">And you can use it in your browser today! :)</p>
					</div>
					<!-- TODO: Add code sample using window.onstorage event -->
				</div>
			</section>
			<footer id="offstore-storage-more" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<!-- TODO: Add CSS detection snippet -->
<pre class="brush:js">if (Modernizr.localstorage) { ... }
if (Modernizr.sessionstorage) { ... }</pre>
					<h2>Fallback options...</h2>
					<ul>
						<li><a href="http://gist.github.com/350433">Storage polyfill</a></li>
						<li><a href="http://code.google.com/p/sessionstorage">sessionstorage</a></li>
						<li><a href="http://github.com/TrippingTheBits/webStorage">jQuery webStorage</a> &ndash; HTML5, userData, cookies, or Gears</li>
						<li><a href="http://code.google.com/p/realstorage/">realstorage</a> &ndash; HTML5 or Google Gears; extends core API</li>
						<li>
							At least 6 more using custom interfaces &ndash; 
							<a href="http://pablotron.org/?cid=1557">PersistJS</a>, 
							<a href="http://yuilibrary.com/gallery/show/storage-lite">YUI Storage Lite</a>, 
							<a href="http://github.com/molily/javascript-client-side-session-storage">Session Storage Wrapper (ssw)</a>, 
							<a href="http://amplifyjs.com">AmplifyJS</a>, 
							<a href="http://github.com/marcuswestin/store.js">store.js</a>, 
							<a href="http://www.jstorage.info/">jStorage</a>
						</li>
						<li>
							Or, do it yourself &ndash; 
							<a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a>, 
							<a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">IE5+ userData Behavior</a>, 
							<a href="http://www.silverlight.net/learn/graphics/file-and-local-data/isolated-storage-(silverlight-quickstart)">Silverlight Isolated Storage</a>
						</li>
					</ul>
					<!--h2>Fallback options using custom interface...</h2>
					<ul>
						<li><a href="http://pablotron.org/?cid=1557">PersistJS</a> &ndash; HTML5, cookies, userData (IE), globalStorage (Firefox), openDatabase (Safari), Flash, Google Gears </li>
						<li><a href="http://yuilibrary.com/gallery/show/storage-lite">YUI Storage Lite</a> &ndash; HTML5, userData (IE), globalStorage (Firefox), openDatabase (Safari)</li>
						<li><a href="http://github.com/molily/javascript-client-side-session-storage">Session Storage Wrapper (ssw)</a> &ndash; HTML5, cookies, userData (IE), or in-memory</li>
						<li><a href="http://amplifyjs.com">AmplifyJS</a> &ndash; HTML5, userData (IE), or in-memory</li>
						<li><a href="http://github.com/marcuswestin/store.js">store.js</a> &ndash; HTML5, userData (IE), globalStorage (Firefox)</li>
						<li><a href="http://www.jstorage.info/">jStorage</a> &ndash; HTML5, userData (IE)</li>
					</ul-->
					<!--h2>Fallback options to implement yourself...</h2>
					<ul>
						<li><a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">IE5+ userData Behavior</a></li>
						<li><a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a></li>
						<li><a href="http://www.silverlight.net/learn/graphics/file-and-local-data/isolated-storage-(silverlight-quickstart)">Silverlight Isolated Storage</a></li>
					</ul-->
				</div>
			</footer>
		</section>
		<section id="offstore-file" class="slide-container">
			<header id="offstore-file-about" class="slide">
				<h1>File API</h1>
				<div class="slide-content">
					<p>Trigger file dialog to select files</p>
					<p>Read raw, binary data (blob); contents via stream; and file metadata</p>
					<!-- TODO: Is this example representative of enough of the spec? Check the spec for examples. -->
<div class="code"><pre class="brush:js">var iFileList = fileSelector.OpenFileDialog();
var i = 0;
while (i &lt; iFileList.length) {
	var iFileObject = iFileList[i];
	if (iFileObject) {
		alert("File Name: " + iFileObject.name + "; Last modified date: "
			+ iFileObject.lastModifiedDate + "; File size: " 
			+ iFileObject.size);
	} 
	i++;
}</pre></div>
					<p class="no-filereader">But, you couldn't use it in your browser, anyway :(</p>
					<p class="filereader">Which, you can use today :)</p>
				</div>
			</header>
			<footer id="offstore-file-more" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Additional info...</h2>
					<ul>
						<li><a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">HTML5 Labs (Microsoft)</a></li>
					</ul>
					<h2>Detection...</h2>
					<!-- TODO: Release ammendment to Modernizr for missing checks -->
					<pre class="brush:js">if (typeof FileReader != 'undefined') { ... }</pre>
					<h2>Fallback options...</h2>
					<ul>
						<li><a href="https://github.com/MrSwitch/dropfile">dropfile</a> &ndash; partial implementation using Silverlight</li>
						<!-- TODO: Can IE5+ userData behavior accomplish this? <a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">IE5+ userData Behavior</a> -->
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="offstore-db" class="slide-container">
			<header id="offstore-db-about" class="slide">
				<h1>IndexedDB</h1>
				<div class="slide-content">
					<p>Designed for large amounts of structured data</p>
					<!-- TODO: Check the spec for a simpler example? -->
					<!-- TODO: JavaScript Ninja Tip: concatenate with [].join('') -->
					<!-- TODO: JavaScript Ninja Tip: use namespaces -->
<div class="code slide"><pre class="brush:js">function openDB(name) {
	try {
		var db = window.indexedDBSync.open(name);
		if (!db) { return; }

		db.setVersion('1.0');
		printDB(db);
		db.close();
	} catch (e) {
		console.log('Error: ' + e.message);
	}
}

function printDB(db) {
	if (!db) { return; }
	
	console.log('IndexedDB name: ' + db.name);
	console.log('IndexedDB version: ' + db.version);
	
	var tables = db.objectStoreNames, 
		names  = [];
	for (var i = 0; i &lt; tables.length; i++) {
		names[names.length] = tables[i];
	}
	console.log('IndexedDB tables: ' + names.join(', '));
}</pre></div>
					<div class="slide">
						<p class="no-indexeddb">But, you don't have this one quite, yet :(</p>
						<p class="indexeddb">And your browser supports it! :)</p>
					</div>
				</div>
			</header>
			<section id="offstore-db-warning" class="slide">
				<header><h1>IndexedDB vs. Web SQL Database</h1></header>
				<div class="slide-content">
					<p>Web SQL Database was a previous client-side database proposal, <span class="newline">but was deprecated in 2010, in favor of IndexedDB</span></p>
					<p class="slide">Chrome, Opera, and Safari added support for Web SQL Database</p>
					<div class="slide">
						<p class="no-websqldatabase">Your browser doesn't have Web SQL Database, anyway, so consider yourself lucky</p>
						<p class="websqldatabase">Your browser supports Web SQL Database, but you should stick with IndexedDB</p>
					</div>
				</div>
			</section>
			<footer id="offstore-db-more" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Additional info...</h2>
					<ul>
						<li><a href="http://html5labs.interoperabilitybridges.com/prototypes/indexeddb/indexeddb/info">HTML5 Labs (Microsoft)</a></li>
					</ul>
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.indexeddb){ ... }</pre>
					<h2>Fallback options...</h2>
					<ul>
						<li><a href="https://github.com/MrSwitch/dropfile">dropfile</a> &ndash; partial implementation using Silverlight</li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="offstore-events" class="slide-container">
			<header id="offstore-events-about" class="slide">
				<h1>Online/Offline Events</h1>
				<div class="slide-content">
					<p>State of network connectivity</p>
					<div class="code"><pre class="brush:js">if (navigator.onLine){ ... }</pre></div>
					<div class="slide">
						<p>...and events to match...</p>
						<!-- TODO: JavaScript Ninja Tip: dynamically attach event handlers -->
						<div class="code"><pre class="brush:xml">&lt;body ononline="..." onoffline="..."&gt;...&lt;/body&gt;</pre></div>
					</div>
				</div>
			</header>
			<footer id="offstore-events-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if ('ononline' in window) { ... }</pre>
					<h2>Fallback options...</h2>
					<ul>
						<li><a href="https://github.com/remy/polyfills/blob/master/offline-events.js">Offline Events</a> &ndash; 5-second server ping interval</li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
				</div>
			</footer>
		</section>
	</article>


	<article id="device">
		<header id="device-intro" class="slide-container">
			<div class="slide">
				<h1>Device Access</h1>
				<div class="slide-content">
					<blockquote cite="http://w3.org/html/logo">
						<p>
							Beginning with the Geolocation API, Web Applications can present rich, device-aware features and 
							experiences. Incredible device access innovations are being developed and implemented, from 
							audio/video input access to microphones and cameras, to local data such as contacts &amp; events, 
							and even tilt orientation.
						</p>
						<div class="author">W3C</div>
					</blockquote>
				</div>
			</div>
		</header>
		<section id="device-geo" class="slide-container">
			<header id="device-geo-about" class="slide">
				<h1>Geolocation</h1>
				<div class="slide-content">
					<p>Get the location of the user by falling back to what's available</p>
					<ol>
						<li class="slide">Assisted GPS (AGPS)
							<ul>
								<li>Improves performance by looking online
									<ul>
										<li>Location of the GPS satellites</li>
										<li>Conditions affecting signal</li>
										<li>Precise time</li>
										<li>Unassisted GPS can take 4 or more minutes to start up</li>
									</ul>
								</li>
								<li>Accurate to 2-3 feet</li>
							</ul>
						</li>
						<li class="slide">Triangulate using Cell Tower id
							<ul>
								<li>All cell towers have a unique id</li>
							</ul>
						</li>
						<li class="slide">WiFi Signatures
							<ul>
								<!-- TODO: What is the point of mentioning this? -->
								<li>Google recorded WIFI signatures when it did street view</li>
								<li>Can register location of your access point in a database</li>
							</ul>
						</li>
						<li class="slide">Lookup IP address</li>
						<li class="slide">Just ask the user
							<ul>
								<li>Can set your location in Control Panel</li>
							</ul>
						</li>
					</ol>
				</div>
			</header>
			<section id="device-geo-demo" class="slide">
				<header><h1>Geolocation</h1></header>
				<div class="slide-content">
<div class="code"><pre class="brush:js">if (!Modernizr.geolocation){ 
	alert('Your browser doesn\'t support geolocation');
}else{
	function success(position){ 
		var timestamp                = position.timestamp,
			accuracyInMeters         = position.coords.accuracy,
			altitudeInMeters         = position.coords.altitude,
			altitudeAccuracyInMeters = position.coords.altitudeAccuracy,
			headingDegreesFromNorth  = position.coords.heading,
			speedInMetersPerSecond   = position.coords.speed, 
			map = new Microsoft.Maps.Map(document.getElementById('mapElement'), {
				credentials:'...your Bing Maps key...',
				center: new Microsoft.Maps.Location(
					position.coords.latitude, position.coords.longitude),
				zoom: 10
			}); 
		map.entities.push(new Microsoft.Maps.Pushpin(map.getCenter(), {text: 'You'}));
	}
	function error(){ alert('Failed to get your current position'); }
	navigator.geolocation.getCurrentPosition(success, error, 
		{ timeout:5000, maximumAge:10000, enableHighAccuracy:true });
}</pre></div>
					<div class="code"><pre class="brush:xml">&lt;div id="mapElement" style="width:400px; height:400px; position:relative;"&gt;&lt;/div&gt;</pre></div>
					<div class="slide">
						<p class="no-geolocation">Unfortunately, I can't show you, since your browser doesn't support it :(</p>
						<p class="geolocation demo">
							<button id="device-geo-demo-start" onclick="html5todayLive.geolocationDemo()">Bing me!</button>
							<!-- TODO: Figure out what to do with this to avoid the "live" object -->
							<script>
								; (function () {
									if (!window.html5todayLive) { window.html5todayLive = {}; }
									html5todayLive.geolocationDemo = function ($m) {
										$m = $('#device-geo-demo-map');
										function error(m) { $m.html('<div style="color:#f00;font-style:italic">' + (m || 'Failed to get your current position') + '</div>'); }
										if (!Modernizr.geolocation) { error("Your browser doesn't support geolocation"); return; }

										// only load bing maps if demo is executed
										// TODO: Remove "http:" if running from the web and add "&s=1" if SSL
										Modernizr.load({
											test: ('Microsoft' in window && 'Maps' in Microsoft && 'Map' in Microsoft.Maps),
											nope: 'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0',
											complete: function (u, r) {
												if (!('Microsoft' in window && 'Maps' in Microsoft && 'Map' in Microsoft.Maps)) {
													error('Could not load Bing Maps control');
													return;
												}

												function success(position) {
													var timestamp = position.timestamp,
														accuracyInMeters = position.coords.accuracy,
														altitudeInMeters = position.coords.altitude,
														altitudeAccuracyInMeters = position.coords.altitudeAccuracy,
														headingDegreesFromNorth = position.coords.heading,
														speedInMetersPerSecond = position.coords.speed,
														map = new Microsoft.Maps.Map($m[0], {
															credentials: 'AjCJ0ol43VgaoxHh0zyAC8bG22BewH3tMA6jk-iYI9JfzNjJHGUrImoy_4F5E-48',
															center: new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude),
															zoom: 10
														});
													map.entities.push(new Microsoft.Maps.Pushpin(map.getCenter(), { text: 'You' }));
													$m.css({ width: '100%', height: '125px', position: 'relative' });
												}
												navigator.geolocation.getCurrentPosition(success, error,
													{ timeout: 5000, maximumAge: 10000, enableHighAccuracy: true });
											}
										});
									};
								})();
							</script>
							<!-- TODO: Add fallback by default -->
							<div id="device-geo-demo-map"></div>
						</p>
						<!-- TODO: Show geolocaiton prompt for each browser -->
						<!--figure>
							<figcaption>Geolocation prompt in Chrome</figcaption>
							<img src="content/images/geo.png" alt="geolocation prompt in Chrome"/>
						</figure-->
						<!-- TODO: Change formatter to use Visual Studio coloring -->
						<!-- TODO: Add demo with navigator.geolocation.watchPosition() -->
						<!-- TODO: Add demo using flickr.places.findByLatLon() -->
						<!-- TODO: Show how permission is requested in different browsers -->
						<!--figure>
							<figcaption>Bing map centered on user's current location</figcaption>
							<img src="content/images/map.png" alt="Bing map centered on user's location"/>
						</figure-->    
					</div>
				</div>
			</section>
			<footer id="device-geo-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.geolocation){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="https://gist.github.com/366184">gist.github.com/366184</a> &ndash; partially implemented; requires jQuery, uses Google for IP-based geolocation</li>
						<li><a href="http://code.google.com/p/geo-location-javascript/">code.google.com/p/geo-location-javascript/</a> &ndash; intended for mobile</li>
						<li><a href="https://github.com/manuelbieh/Better-Geolocation-API/">Better Geolocation</a></li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-781T">Using location &amp; sensors in your app (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/EXT04">Riding the Geolocation Wave (Mix11)</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="device-capture" class="slide-container">
			<header id="device-capture-about" class="slide">
				<h1>Media Capture API</h1>
				<div class="slide-content">
					<p>Image and video capture using existing file upload element</p>
					<div class="code"><pre class="brush:xml">&lt;input id="capture" type="file" accept="image/*" capture="camera"/&gt;</pre></div>
<div class="code"><pre class="brush:js">// access file from input element
var captureInput = document.getElementById('capture'), 
	file = captureInput.files[0];
if (file){
	// get format data asynchronously
	file.getFormatData(displayFormatData, errorHandler);
}

// success callback
function displayFormatData(formatData) {  
	var mainType = file.type.split('/')[0]; // 'image', 'video' or 'audio'
	var mediaDescriptionNode = document.createElement('p');
	if (mainType == 'image'){
		mediaDescriptionNode.appendChild(document.createTextNode(
			'This is an image of dimensions ' + formatData.width + 'x' + formatData.height);
	}else{
		mediaDescriptionNode.appendChild(document.createTextNode(
			'Duration: ' + formatData.duration  + 's');
	}
	captureInput.parentNode.insertBefore(mediaDescriptionNode, captureInput);
}

// error callback
function errorHandler(error) {
	alert('Couldn’t retrieve format properties for the selected file (error code ' + error.code + ')');
}</pre></div>
				</div>
			</header>
			<section id="device-capture-speech" class="slide">
				<header><h1>Proposed Speech API</h1></header>
				<div class="slide-content">
					<p>Microsoft proposed Speech API to W3C in March 2011</p>
					<p>Media Capture API most likely location</p>
					<p><a href="http://html5labs.interoperabilitybridges.com/prototypes/media-capture-api/media-capture-api/info">html5labs.interoperabilitybridges.com/prototypes/media-capture-api/media-capture-api/info</a></p>
				</div>
			</section>
			<footer id="device-capture-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if ('capture' in document.createElement('input')){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li>Well, I guess you're left to do it yourself for now &ndash; Flash, Silverlight</li>
					</ul>
				</div>
			</footer>
		</section>
	</article>


	<article id="connect">
		<header id="connect-intro" class="slide-container">
			<div class="slide">
				<h1>Connectivity</h1>
				<div class="slide-content">
					<blockquote cite="http://w3.org/html/logo">
						<p>
							More efficient connectivity means more real-time chats, faster games, and better communication. 
							Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server 
							more efficiently than ever before.
						</p>
						<div class="author">W3C</div>
					</blockquote>
				</div>
			</div>
		</header>		
		<section id="connect-sockets" class="slide-container">
			<header id="connect-sockets-about" class="slide">
				<h1>Web Sockets</h1>
				<div class="slide-content">
					<p>Bi-directional, full-duplex communication channels over a single TCP socket</p>
					<p>Real-time performance</p>
					<!-- TODO: Replace this formatter with one that uses Visual Studio coloring -->
<div class="code slide"><pre class="brush:js">// connect to the web site
var socket = new WebSocket('ws://contoso.com');
socket.onopen = function(event) { alert('socket open'); };
socket.onmessage = function(event) { alert('data recieved: ' + event.data); };
socket.onclose = function(event) { alert('socket closed'); };
socket.postMessage('Hello Server!');
socket.disconnect();</pre></div>
					<div class="slide">
						<p class="no-websockets">Unfortunately, your browser doesn't support web sockets, yet :(</p>
						<p class="websockets">Your browser is ready for all the bi-di, fu-du comms you're willing to throw its way! :)</p>
					</div>
				</div>
			</header>
			<footer id="connect-sockets-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.websockets){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://socket.io/">socket.io</a> &ndash; custom API; HTML5, Flash sockets, AJAX long-polling, AJAX multipart streaming, iframe, JSONP polling</li>
						<li><a href="https://github.com/gimite/web-socket-js">web_socket.js</a> &ndash; forced Flash fallback; only use if Web Sockets support is not available</li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-373C">Building real-time web apps with HTML5 WebSockets (Build)</a></li>
						<li><a href="http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/info">HTML5 Labs (Microsoft)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM04">Filling the HTML5 Gaps with Polyfills and Shims (Mix11)</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="connect-events" class="slide-container">
			<header id="connect-events-about" class="slide">
				<h1>Server-Sent Events</h1>
				<div class="slide-content">
					<p>Opens HTTP connection for push notifications from a server</p>
					<p>Server must send messages with <code>text/event-stream</code> MIME type</p>
					<p>Designed to work with other push notification schemes, like Push SMS</p>
<div class="code slide"><pre class="brush:js">var source = new EventSource('/updates');
source.onmessage = function (event) { 
alert(event.data);
};</pre></div>
					<div class="slide">
						<p class="no-eventsource">Mmm... your browser isn't quite ready for this one :(</p>
						<p class="eventsource">I hope you're ready for server-sent events, cause your browser is! :)</p>
					</div>
				</div>
			</header>
			<footer id="connect-events-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (typeof EventSource !== 'undefined'){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://github.com/Yaffle/polyfills/blob/master/eventsource.js">github.com/Yaffle/polyfills/blob/master/eventsource.js</a> &ndash; server push (not HTML5) or polling</li>
						<li><a href="http://github.com/rwldrn/jquery.eventsource">jQuery EventSource</a> &ndash; requires jQuery, uses custom API</li>
						<li><a href="http://github.com/remy/polyfills/blob/master/EventSource.js">github.com/remy/polyfills/blob/master/EventSource.js</a> &ndash; polling</li>
					</ul>
				</div>
			</footer>
		</section>
	</article>


	<article id="media">
		<header id="media-top" class="slide-container">
			<div class="slide">
			<h1>Multimedia</h1>
				<div class="slide-content">
					<blockquote cite="http://w3.org/html/logo">
						<p>
							Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and 
							sites. Lights, camera, action!
						</p>
						<div class="author">W3C</div>
					</blockquote>
				</div>
			</div>
		</header>
		<section id="media-audio" class="slide-container">
			<header id="media-audio-about" class="slide">
				<h1>Audio</h1>
				<div class="slide-content">
					<p>Umm... plays audio <span class="slide">...maybe</span></p>
					<div class="slide">
<div class="code"><pre class="brush:xml">&lt;audio src="nationalanthem.mp3"&gt;
    Your browser does not support the audio element.
&lt;/audio&gt;</pre></div>
					</div>
					<div class="slide">
						<!-- TODO: Include more details about container/codec issue -->
						<!-- TODO: Include browser support matrix -->
						<!-- TODO: What is the reasoning behind probably/maybe? -->
						<p>Each browser supports different containers/codecs</p>
<div class="code"><pre class="brush:xml">&lt;audio&gt;
	&lt;source src="nationalanthem.mp3"/&gt;
	&lt;source src="nationalanthem.m4a"/&gt;
	&lt;source src="nationalanthem.oga"/&gt;
	&lt;source src="nationalanthem.wav"/&gt;
    Your browser does not support the audio element.
&lt;/audio&gt;</pre></div>
					</div>
					<!--ul class="slide">
						<li><code class="slidenote" title="audio will start playing once loaded">autoplay</code></li>
						<li><code class="slidenote" title="on-screen controls are displayed">controls</code></li>
						<li><code class="slidenote" title="automatically restarts, when audio ends">loop</code></li>
						<li><code class="slidenote" title="starts loading the file as soon as the tag is hit, instead of waiting until after all content is loaded">preload</code></li>
						<li><code class="slidenote" title="location of the audio file">src</code></li>
					</ul-->
					<div class="slide">
						<p class="demo"><audio src="http://media.ch9.ms/ch9/18ac/1429b452-aac2-4f34-9063-9f5d001718ac/JensenUI_ch9.mp3" controls="controls">Your browser does not support the audio element.</audio></p>
						<p class="no-audio">Right about now, you should be seeing that dreaded "unsupported" message :(</p>
						<p class="audio">You should be good to go ...<span class="mp3-probably">probably</span><span class="mp3-maybe">maybe</span> :S<span class="mp3-maybe newline">...of course, you may not see anything</span></p>
					</div>
				</div>
			</header>
			<footer id="media-audio-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
<pre class="brush:js">// Modernizr supports mp3, m4a, ogg, and wav
switch (Modernizr.audio.mp3){
	case 'probably': ...
	case 'maybe': ...
	default: ...
}</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://github.com/happyworm/jPlayer">jPlayer</a> &ndash; HTML5, Flash; requires jQuery</li>
						<li><a href="http://kolber.github.com/audiojs/">audio.js</a> &ndash; HTML5, Flash</li>
						<li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a> &ndash; HTML5, Flash</li>
						<li><a href="https://github.com/etianen/html5media">html5media</a> &ndash; HTML5, Flash</li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-775T">Your Metro style app, video and audio, Part 1 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-776T">Your Metro style app, video and audio, Part 2 (Build)</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="media-video" class="slide-container">
			<header id="media-video-about" class="slide">
				<h1>Video</h1>
				<div class="slide-content">
					<p>Kills Flash <span class="slide">...just kidding!</span></p>
					<div class="slide">
<div class="code"><pre class="brush:xml">&lt;video src="kittehs.mp4"&gt;
	Your browser does not support the video element.
&lt;/video&gt;</pre></div>
					</div>
					<p class="slide">Like <code>audio</code>, browsers support different containers/codecs</p>
					<p class="slide">Still room for Flash and Silverlight in HTML5 world</p>
					<ul class="slide">
						<li>No full screen</li>
						<li>No adaptive streaming</li>
					</ul>
					<div class="slide">
						<p class="demo"><video src="http://media.ch9.ms/ch9/18ac/1429b452-aac2-4f34-9063-9f5d001718ac/JensenUI_low_ch9.mp4" controls="controls">Your browser does not support the video element.</video></p>
						<p class="no-video">Ooh... looks like you're stuck with Flash and Silverlight :(</p>
						<p class="video">You should be good ...<span class="h264-probably">probably</span><span class="h264-maybe">maybe</span> :S<span class="h264-maybe newline">...or, maybe not :?</span></p>
					</div>
				</div>
			</header>
			<footer id="media-video-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
<pre class="brush:js">// Modernizr supports h264, ogg, and webm
switch (Modernizr.video.h264){
	case 'probably': ...
	case 'maybe': ...
	default: ...
}</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://github.com/happyworm/jPlayer">jPlayer</a> &ndash; HTML5, Flash; requires jQuery</li>
						<li><a href="http://mediaelementjs.com/">MediaElement.js</a> &ndash; HTML5, Flash, Silverlight</li>
						<li><a href="https://github.com/etianen/html5media">html5media</a> &ndash; HTML5, Flash</li>
						<li><a href="http://videojs.com/">VideoJS</a> &ndash; HTML5, Flash</li>
						<li><a href="http://camendesign.com/code/video_for_everybody">Video for Everybody</a> &ndash; HTML5, Flash</li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-775T">Your Metro style app, video and audio, Part 1 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-776T">Your Metro style app, video and audio, Part 2 (Build)</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<!--section>
			<header><h1>Embed</h1></header>
		</section>
		<section>
			<header><h1>Embed vs Object vs Img vs Iframe</h1></header>
		</section-->
	</article>


	<article id="graphics">
		<header id="graphics-top" class="slide-container">
			<div class="slide">
				<h1>3D, Graphics, &amp; Effects</h1>
				<div class="slide-content">
					<blockquote cite="http://w3.org/html/logo">
						<p>
							Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning 
							visuals natively rendered in the browser.
						</p>
						<div class="author">W3C</div>
					</blockquote>
				</div>
			</div>
		</header>
		<section id="graphics-svg" class="slide-container">
			<header id="graphics-svg-about" class="slide">
				<h1>SVG</h1>
				<div class="slide-content">
					<p>2D, <span class="slidenote" title="object tree kept in memory, unlike Canvas and XNA">retained mode</span>, vector graphics via XML <span class="newline">...conceptually like XAML</span></p>
					<div class="slide">
						<p>Styling with CSS, scripting with JavaScript (when self-contained)</p>
						<p>Supported as background image via CSS</p>
					</div>
					<div class="slide">
						<p>Inline with <code>&lt;svg&gt;</code>, external .svg file with <code>&lt;img&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;object&gt;</code>, or <code>&lt;iframe&gt;</code></p>
						<p>Web server <em>must</em> serve files as <code>image/svg+xml</code></p>
					</div>
					<div class="slide">
						<p>Only <code>object</code> supports a fallback</p>
<div class="code"><pre class="brush:xml">&lt;object class="html5" data="html5.svg" type="image/svg+xml"&gt;
	&lt;span class="html5"&gt;&lt;/span&gt;
&lt;/object&gt;</pre></div>
					</div>
					<div class="slide">
						<p class="demo"><object data="../content/images/html5.svg" type="image/svg+xml">No SVG for you</object></p>
						<p class="no-svg">Looks like your browser doesn't support SVG :(</p>
						<p class="svg">Your browser is good to go! Enjoy! :)</p>
					</div>
					<div class="slide">
						<p>Most important SVG propertis: <code>height</code>, <code>width</code>, and <code>viewBox</code></p>
						<div class="code"><pre class="brush:xml">&lt;svg height="[height]" width="[width]" viewBox="[x] [y] [width] [height]"&gt;...&lt;/svg&gt;</pre></div>
					</div>
				</div>
			</header>
			<!-- TODO: Add interactive SVG examples -->
			<!-- 
			<img src="content/images/html5-pubs.svg" type="image/svg+xml"/>
			<embed src="content/images/html5-pubs.svg" type="image/svg+xml"/>
			<object data="content/images/html5-pubs.svg" width="100%" height="400px" type="image/svg+xml">X-P</object>
			<iframe src="content/images/html5-pubs.svg" type="image/svg+xml"></iframe>
			<pre>
				<code>
					&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
						width="165.95422" height="73.61879"&gt;
						&lt;g transform="translate(-280.67154,-494.78412)"&gt;
							&lt;path style="font-size:781.26818848px;font-style:normal;font-weight:normal;text-align:start;line-height:125%;text-anchor:start;fill:#0075be;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
								d="M 351.2253,527.37811 L 351.2253,543.97963 L 357.9564,543.97963 L 357.9564,527.21482 C 358.52672,517.75385 383.89082,514.62004 386.41666,527.21482 L 386.41666,543.97963 L 393.45994,543.97963 L 393.45994,527.37811 C 393.45989,525.47304 392.98265,523.74031 392.02825,522.17993 C 391.07375,520.61959 389.69427,519.27242 387.88979,518.13842 C 386.08523,517.00446 383.88552,516.12449 381.29064,515.4985 C 378.69568,514.87257 375.75775,514.55959 372.47684,514.55956 C 369.2257,514.55959 366.30269,514.88164 363.70779,515.52572 C 361.11285,516.16985 358.8833,517.06796 357.01914,518.22006 C 355.15496,519.37221 353.72329,520.72846 352.72409,522.2888 C 351.7249,523.84918 351.2253,525.54561 351.2253,527.37811 L 351.2253,527.37811 z"/&gt;
							&lt;path style="fill:#0075be;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
								d="M 339.71777,516.30504 C 342.3787,517.42558 344.56536,516.88621 346.74008,516.30504 L 346.74008,544.13052 L 339.71777,544.13052 L 339.71777,516.30504 z"/&gt;
							&lt;path style="opacity:1;fill:#fba829;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
								d="M 312.08514,454.75558 A 16.241785,11.080844 0 1 1 279.60157,454.75558 A 16.241785,11.080844 0 1 1 312.08514,454.75558 z"
								transform="matrix(0.3155432,0,0,0.323756,249.87205,362.52803)"/&gt;
							&lt;path style="font-size:3120.79492188px;font-style:normal;font-weight:normal;text-align:start;line-height:125%;text-anchor:start;fill:#0075be;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
								d="M 336.59587,531.52541 C 337.47355,525.12066 333.06382,520.9562 330.1343,518.92023 C 325.80065,515.90841 320.33956,514.42199 315.0549,514.14674 C 308.81642,514.08511 302.75903,514.89785 297.21129,518.75698 L 297.21129,506.89105 L 290.26569,506.89105 L 290.26569,528.39291 C 290.18674,537.39681 296.24633,541.25296 304.04934,544.20982 C 306.88441,544.90918 310.0258,545.25887 313.47352,545.25887 C 316.86419,545.25887 319.96997,544.90918 322.79084,544.20982 C 325.61164,543.51044 328.04782,542.38625 330.09938,541.15206 C 332.15086,539.91788 333.74649,538.47388 334.88627,536.82007 C 336.02595,535.16627 336.59582,533.40138 336.59587,531.52541 L 336.59587,531.52541 z M 315.5199,541.42446 C 307.71668,541.66806 298.57132,539.3125 297.68354,530.15805 C 297.19024,525.07129 302.25643,518.66619 313.47352,518.27129 C 318.08551,518.10893 328.84393,520.68059 329.57833,529.37098 C 330.0311,534.72872 323.32313,541.18087 315.5199,541.42446 z"/&gt;
							&lt;path style="font-size:10988.16210938px;font-style:normal;font-weight:normal;text-align:start;line-height:125%;text-anchor:start;fill:#0075be;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
								d="M 434.37889,527.30393 C 434.37378,524.01082 432.58237,521.65295 430.55535,519.67404 C 432.82141,519.42535 435.23632,519.41089 437.5486,519.60017 L 437.5486,513.19639 C 432.96557,512.87197 427.67915,514.17413 424.91934,516.02552 C 424.20744,515.74997 423.45964,515.49976 422.67593,515.27495 C 420.26879,514.58446 417.6258,514.23921 414.74695,514.23919 C 411.81969,514.23921 409.15855,514.58447 406.76354,515.27495 C 404.36851,515.96548 402.30008,516.89531 400.55825,518.06445 C 398.81641,519.23363 397.46165,520.61464 396.49398,522.2075 C 395.52628,523.8004 395.04244,525.4992 395.04245,527.30393 C 395.04244,529.09299 395.52628,530.76825 396.49398,532.32973 C 397.46165,533.89123 398.78012,535.26048 400.44939,536.43748 C 402.11864,537.61448 404.06611,538.53647 406.2918,539.20343 C 410.49912,540.23862 415.12444,540.71203 419.42731,539.94823 C 431.07298,544.39932 426.45661,553.3839 422.07677,555.28431 C 414.01671,558.78158 406.652,556.8212 403.36386,551.53799 L 395.8948,551.53799 C 398.59797,559.06139 409.30597,561.26034 414.47438,561.32121 C 425.6492,561.45284 438.05562,554.06215 433.11504,543.73484 C 431.70105,540.77917 428.2903,538.3586 426.20669,537.83507 C 431.44655,535.48685 434.38568,531.6782 434.37889,527.30393 z M 414.74695,536.28309 C 407.93359,536.28309 402.45396,532.20275 402.45396,527.35101 C 402.45396,521.26472 410.19056,518.27768 414.74695,518.27768 C 421.6183,518.27768 426.85512,522.69085 426.85512,527.35101 C 426.85512,533.37169 420.08556,536.28309 414.74695,536.28309 z"/&gt;
						&lt;/g&gt;
					&lt;/svg&gt;
				</code>
			</pre>
			-->
			<footer id="graphics-svg-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.svg){ ... }</pre>
					<pre class="brush:js">if (Modernizr.inlinesvg){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://code.google.com/p/svgweb/">SVG Web</a> &ndash; HTML5, Flash</li>
						<li><a href="http://raphaeljs.com/">Raphael</a> &ndash; HTML5, VML</li>
						<li><a href="http://code.google.com/p/canvg/">canvg</a> &ndash; Flash, Canvas; overrides HTML5</li>
						<li><a href="http://docs.dojocampus.org/dojox/gfx/">dojox.gfx</a> &ndash; HTML5, VML, Silverlight, Canvas; requires Dojo</li>
						<li><a href="https://github.com/kangax/fabric.js">fabric.js</a> &ndash; Canvas</li>
						<li>Or, do it yourself &ndash; Canvas, IE5+ userData Behavior, Flash, Silverlight, VML</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-551P">Programming SVG and canvas graphics in a Metro style app based on HTML5 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM15">Modernizing Your Website: SVG Meets HTML5 (Mix11)</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="graphics-canvas" class="slide-container">
			<header id="graphics-canvas-about" class="slide">
				<h1>Canvas</h1>
				<div class="slide-content">
					<p>2D, <span class="slidenote" title="doesn't remember what it already drew, unlike SVG and Silverlight">immediate mode</span> drawing surface <span class="newline">...conceptually like XNA</span></p>
					<p>Small API &ndash; 17 objects, 45 methods, 21 attributes</p>
					<p>Not accessible</p>
<pre class="brush:xml">&lt;canvas id="myCanvas"&gt;
	Your browser does not support HTML5 Canvas
&lt;/canvas&gt;</pre>
<pre class="brush:js">var canvas = document.getElementById('myCanvas');
var context = example.getContext('2d');
context.fillStyle = 'rgb(255,0,0)';
context.fillRect(30, 30, 50, 50);</pre>
					<ul class="demo slide">
						<li>
							<figure>
								<figcaption><a href="http://www.pirateslovedaisies.com">Pirates Love Daisies</a>, a game written entirely in HTML5</figcaption>
								<a href="http://www.pirateslovedaisies.com"><img src="../content/images/canvas-pirates.png" alt="Pirates Love Daisies, a game written entirely in HTML5"/></a>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption><a href="http://chrome.angrybirds.com">Angry Birds</a></figcaption>
								<a href="http://chrome.angrybirds.com"><img src="../content/images/canvas-angrybirds.png" alt="Angry Birds"/></a>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption><a href="http://daftpunk.themaninblue.com/">"Definitive Daft Punk" Mashup Song Visualization</a></figcaption>
								<a href="http://daftpunk.themaninblue.com"><img src="../content/images/canvas-daftpunk.png" alt="'Definitive Daft Punk' Mashup Song Visualization"/></a>
							</figure>
						</li>
					</ul>
				</div>
			</header>
			<footer id="graphics-canvas-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.canvas){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://flashcanvas.net/">FlashCanvas</a> &ndash; Flash</li>
						<li><a href="http://code.google.com/p/explorercanvas/">ExplorerCanvas</a> &ndash; VML</li>
						<li><a href="http://slcanvas.codeplex.com/">Silverlight HTML5 Canvas</a> &ndash; HTML5, Silverlight</li>
						<li><a href="http://burzak.com/proj/fxcanvas/">fxCanvas</a> &ndash; Flash</li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
					<h2>References...</h2>
					<ul>
						<li><a href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">HTML5 Canvas Cheat Sheet</a></li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-551P">Programming SVG and canvas graphics in a Metro style app based on HTML5 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/CMP06">HTML5 Canvas Mastery (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM03">Deep Dive Into HTML5 <code>&lt;canvas&gt;</code> (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM12">5 Things You Need To Know To Start Using <code>&lt;canvas&gt;</code> (Mix11)</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="graphics-webgl" class="slide-container">
			<header id="graphics-webgl-about" class="slide">
				<h1>WebGL</h1>
				<p>Canvas extension based on OpenGL to support 3D graphics</p>
				<figure class="demo">
					<figcaption><a href="http://www.ro.me">Rome</a>, an interactive film in WebGL</figcaption>
					<a href="http://www.ro.me"><img src="../content/images/graphics-webgl-rome.png" alt="Rome, an interactive film in WebGL"/></a>
				</figure>
			</header>
			<footer id="graphics-webgl-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.webgl){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://code.google.com/p/jebgl/">JebGL</a> &ndash; HTML5, Java applet</li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://www.netmagazine.com/features/20-webgl-sites-will-blow-your-mind">20 WebGL sites that will blow your mind</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<!-- TODO: Add CSS3d info -->
		<!-- TODO: Add comparison of graphics options -->
		<!--section id="graphics-css3d">
			<header><h1>CSS 3D</h1></header>
		</section>
		<section id="graphics-compare">
			<header><h1>Battle Royale<!--...w/ Cheese--></h1></header>
			<!-- TODO: Include info about when to choose what technology - ->
			<ul>
				<li>SVG</li>
				<li>Canvas</li>
				<li>WebGL</li>
				<li>CSS 3D</li>
			</ul>
		</section--->
	</article>


	<article id="perfint">
		<header id="perfint-top" class="slide-container">
			<div class="slide">
				<h1>Performance &amp; Integration</h1>
				<div class="slide-content">
					<blockquote cite="http://w3.org/html/logo">
						<p>
							Make your Web Apps and dynamic web content faster with a variety of techniques and technologies 
							such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.
						</p>
						<div class="author">W3C</div>
					</blockquote>
				</div>
			</div>
		</header>
		<section id="perfint-workers" class="slide-container">
			<header id="perfint-workers-about" class="slide">
				<h1>Web Workers</h1>
				<div class="slide-content">
					<p>Run JavaScript in background</p>
					<p>Post/receive messages to indirectly interact with the DOM</p>
<div class="code slide"><pre class="brush:js">var worker = new Worker('myscript.js');
worker.onmessage = function(event) { alert('Message recieved: ' + event.data); };
worker.postMessage('Hello there!');</pre></div>
				</div>
			</header>
			<footer id="graphics-workers-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.webworkers){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://code.google.com/p/fakeworker-js/">fakeworker.js</a> &ndash; JavaScript timeouts</li>
						<li><a href="http://html5-shims.googlecode.com/svn/trunk/demo/workers.html">html5-shims.googlecode.com/svn/trunk/demo/workers.html</a> &ndash; Google Gears</li>
						<li>Or, do it yourself &ndash; Flash, JavaScript, Silverlight</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-379P">Building responsive apps and sites with HTML5 web workers (Build)</a></li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="perfint-xhr" class="slide-container">
			<header id="perfint-xhr-about" class="slide">
				<h1>XmlHttpRequest 2</h1>
				<div class="slide-content">
					<p>Cross-origin requests c/o HTTP headers</p>
					<p>Progress events</p>
					<p>Sending/receiving byte streams</p>
				</div>
			</header>
			<footer id="graphics-xhr-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if ('withCredentials' in new XMLHttpRequest){ ... }</pre>
					<pre class="brush:js">if (!!window.FormData){ ... }</pre>
					<pre class="brush:js">if ('upload' in new XMLHttpRequest){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://flxhr.flensed.com/">flXHR</a> &ndash; Flash (cross-domain requests)</li>
						<li>Or, do it yourself &ndash; Flash, Silverlight</li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="perfint-time" class="slide-container">
			<header id="perfint-time-about" class="slide">
				<h1>Performance Timeline</h1>
				<div class="slide-content">
					<p>Instrumentation infrastructure <span class="newline">via the Performance Timeline API</span></p>
					<p>Access instrumentation details for HTML elements <span class="newline">via the Resource Timing API</span></p>
					<p>Add custom entries to the perf timeline <span class="newline">via the User Timing API</span></p>
				</div>
			</header>
			<footer id="perfint-time-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.performance.getEntriesByType){ ... }</pre>
				</div>
			</footer>
		</section>
		<section id="perfint-nav" class="slide-container">
			<header id="perfint-nav-about" class="slide">
				<h1>Navigation Timing</h1>
				<div class="slide-content">
					<p>Navigation details &ndash; <code>window.performance.navigation</code></p>
					<ul id="perfint-nav-navigation">
						<li><code>type</code></li>
						<li><code>redirectCount</code></li>
					</ul>
					<p>Performance timing (in order) &ndash; <code>window.performance.timing</code></p>
					<ol id="perfint-nav-timing">
						<li><code>navigationStart</code></li>
						<li><code>unloadEventStart</code></li>
						<li><code>unloadEventEnd</code></li>
						<li><code>redirectStart</code></li>
						<li><code>redirectEnd</code></li>
						<li><code>fetchStart</code></li>
						<li><code>domainLookupStart</code></li>
						<li><code>domainLookupEnd</code></li>
						<li><code>connectStart</code></li>
						<li><code>connectEnd</code></li>
						<li><code>secureConnectionStart</code></li>
						<li><code>requestStart</code></li>
						<li><code>responseStart</code></li>
						<li><code>responseEnd</code></li>
						<li><code>domLoading</code></li>
						<li><code>domInteractive</code></li>
						<li><code>domContentLoadedEventStart</code></li>
						<li><code>domContentLoadedEventEnd</code></li>
						<li><code>domComplete</code></li>
						<li><code>loadEventStart</code></li>
						<li><code>loadEventEnd</code></li>
					</ol>
				</div>
			</header>
			<footer id="perfint-nav-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.performance &amp;&amp; !!window.performance.navigation){ ... }</pre>
					<pre class="brush:js">if (!!window.performance &amp;&amp; !!window.performance.timing){ ... }</pre>
				</div>
			</footer>
		</section>
		<section id="perfint-vis" class="slide-container">
			<header id="perfint-vis-about" class="slide">
				<h1>Page Visibility</h1>
				<div class="slide-content">
					<p>Detect when page is visible for power efficiency</p>
<div class="code"><pre class="brush:js">var timer = 0, 
	intervalWhenVisible    = 1 * 1000,   // poll 1/sec when visible
	intervalWhenNotVisible = 60 * 1000;  // poll 1/min when not visible

$(function(){
	function update() { 
		// ...
	}

	function visibilityChanged() {
		clearTimeout(timer);
		timer = setInterval(update, 
			document.hidden ? intervalWhenNotVisible : intervalWhenVisible);
	}

	visibilityChanged();
	if(document.addEventListener){ 
		document.addEventListener("visibilitychange", visibilityChanged);
	}
});</pre></div>
					<p>...but, since the spec isn't done, you need a vendor prefix</p>
					<!-- TODO: Ensure vendor prefixes have been discussed (see feature detection) -->
					<!--pre>
						<code>
							if(!('hidden' in document) &amp;&amp; ('msHidden' in document || 'mozHidden' in document || 'webkitHidden' || 'oHidden')){
								
								if(document.addEventListener){ 
									document.addEventListener('msvisibilitychange', changed);
								}
								document.onvisibilitychange = function(){
									document.msvisibilitychange = 
								}
							}
						</code>
					</pre-->
				</div>
			</header>
			<footer id="perfint-vis-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if ('msHidden' in document || 'mozHidden' in document || 'webkitHidden' in document || 'oHidden' in document){ ... }</pre>
				</div>
			</footer>
		</section>
		<section id="perfint-immed" class="slide-container">
			<header id="perfint-immed-about" class="slide">
				<h1>setImmediate</h1>
				<div class="slide-content">
					<p>Immediate async script execution via <code>window.setImmediate()</code></p>
					<p>Avoids minimum delay built into <code>window.setTimeout()</code></p>
				</div>
			</header>
			<footer id="perfint-immed-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.setImmediate){ ... }</pre>
					<h2>Fallback...</h2>
					<pre class="brush:js">window.setImmediate = window.setImmediate || window.setTimeout</pre>
				</div>
			</footer>
		</section>
		<section id="perfint-anim" class="slide-container">
			<header class="slide">
				<h1>requestAnimationFrame</h1>
				<div class="slide-content">
					<p>More efficient script-based animations</p>
					<p>Browser determines animation rate based on various factors (e.g. active tab, CPU utilization)</p>
				</div>
			</header>
			<footer id="perfint-anim-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.requestAnimationFrame){ ... }</pre>
					<h2>Fallback...</h2>
					<ul>
						<li><a href="http://gist.github.com/838785">gist.github.com/838785</a> &ndash; falls back on <code>window.setTimeout</code></li>
						<li>Or, do it yourself &ndash; Flash, JavaScript, Silverlight</li>
					</ul>
				</div>
			</footer>
		</section>
		<section id="perfint-history" class="slide-container">
			<header class="slide">
				<h1>History</h1>
				<div class="slide-content">
					<p>Manipulate the browser URL (and, thereby, the history) without refreshing the page</p>
					<div class="code"><pre class="brush:js">history.pushState([data], [title], [url]);</pre></div>
					<p>Or, change the URL without adding an extra item in the history...</p>
					<div class="code"><pre class="brush:js">history.replaceState([data], [title], [url]);</pre></div>
				</div>
			</header>
			<footer id="perfint-history-footer" class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.history){ ... }</pre>
					<h2>Fallback...</h2>
					<ul>
						<li><a href="https://github.com/balupton/history.js">history.js</a> &ndash; falls back to <code>window.onhashchange</code></li>
						<li>Or, do it yourself &ndash; Flash, JavaScript, Silverlight</li>
					</ul>
				</div>
			</footer>
		</section>
	</article>


	<article id="styling">
		<header id="styling-intro" class="slide-container">
			<div class="slide">
				<h1>CSS3 Styling</h1>
				<div class="slide-content">
					<blockquote cite="http://w3.org/html/logo">
						<p>
							CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing 
							your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides 
							typographic flexibility and control far beyond anything the web has offered before.
						</p>
						<div class="author">W3C</div>
					</blockquote>
				</div>
			</div>
		</header>
		<section id="styling-all" class="slide-container">
			<header id="styling-all-intro" class="slide">
				<h1>New with CSS3</h1>
				<div class="slide-content">
					<ul>
						<li>Selectors</li>
						<li>Namespaces</li>
						<li>Values/Units</li>
						<li>Backgorunds &ndash; multiple background images, <code>background-size</code>, <code>box-shadow</code></li>
						<li>Borders &ndash; <code>border-radius</code>, <code>border-image</code></li>
						<li>Colors &ndash; <code>linear-gradient</code>, <code>radial-gradient</code>, <code>opacity</code>, <code>rgba()</code>, <code>hsl(), <code>hsla()</code></code></li>
						<li>Text &ndash; <code>text-shadow</code>, <code>@font-face</code>, <code>:selection</code></li>
						<li>Positioning &ndash; positioned floats, floating point value support</li>
						<li>Layout &ndash; flexbox, grid layout, multiple columns, regions, template, box sizing</li>
						<li>Media Queries</li>
						<li>Transforms &ndash; translate, rotation, scale</li>
						<li>Animations/Transitions</li>
					</ul>
				</div>
			</header>
		</section>
		<footer id="styling-footer" class="slide-container">
			<div class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>Detection...</h2>
					<p><a href="http://www.modernizr.com/docs/#features-css">See Modernizer for a list</a></p>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="https://github.com/scottjehl/Respond">Respond.js</a> &ndash; media queries</li>
						<li><a href="http://code.google.com/p/css3-mediaqueries-js">css3-mediaqueries.js</a></li>
						<li><a href="http://adapt.960.gs/">Adapt.js</a> &ndash; media queries; requires non-CSS config</li>
						<li><a href="http://css3pie.com/">PIE</a> &ndash; <code>border-radius</code>, <code>box-shadow</code>, <code>linear-gradient</code>; targets IE6-8</li>
						<li><a href="http://selectivizr.com">Select[ivizr]</a> &ndash; CSS3 selectors for IE6-8</li>
						<li><a href="http://transformie.com">Transformie</a> &ndash; CSS3 transforms via IE6+ <code>filter</code></li>
						<li><a href="https://github.com/doctyper/flexie">Flexie</a> &ndash; flexbox for IE6-9 and Opera 10+</li>
						<li><a href="https://github.com/heygrady/textshadow">jquery.textshadow</a> &ndash; for IE6-9</li>
						<li><a href="http://ricardrobin.github.com/Regions.js/">Regions.js</a></li>
					</ul>
					<h2>References...</h2>
					<ul>
						<li><a href="http://css-tricks.com">CSS Tricks</a></li>
						<li><a href="http://css.me">CSS Generator</a></li>
						<li><a href="http://mediaqueri.es">mediaqueri.es</a></li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-381T">Building beautiful and interactive apps with HTML5 &amp; CSS3 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-873T">Designing Metro style apps using CSS3 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-486T">A deep dive into Expression Blend for designing Metro style apps using HTML (Build)</a></li>
                        <li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-212T">Stand out with styling in your HTML app (Build)</a></li>
					    <li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-206T">Bring apps to life with Metro style animations in HTML5 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/CMP01">HTML5/CSS3 Boot Camp (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM09">The View of the World Depends on the Glasses I Wear (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/EXT20">CSS3 Takes on the World (Mix11)</a></li>
					</ul>
				</div>
			</div>
		</footer>
	</article>


	<!--article id="future">
		<header id="future-top"><h1>Future of HTML</h1></header>
		<footer id="future-footer">
			<h1>The more you know...</h1>
			<ul>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM17">The Future of HTML5 (Mix11)</a></li>
			</ul>
		</footer>
	</article-->


	<article id="tools">
		<header id="tools-about" class="slide-container">
			<div class="slide">
				<h1>HTML5 tools</h1>
				<ul class="slide-content">
					<li><a href="http://msdn.microsoft.com/en-us/library/gg589507(v=VS.85).aspx">IE9 F12 Developer Tools</a></li>
					<li><a href="http://msdn.microsoft.com/vstudio/">Visual Studio 2010</a></li>
					<li><a href="http://www.microsoft.com/download/en/details.aspx?id=23691">Visual Studio 2010 SP1</a></li>
					<li><a href="http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83">Web Standards Update for Visual Studio 2010 SP1</a></li>
					<li><a href="http://www.microsoft.com/expression/products/blend">Expression Blend 5</a></li>
					<li><a href="http://www.microsoft.com/expression/products/web">Expression Web 4</a></li>
					<li><a href="http://www.asp.net/mvc/mvc3">ASP.NET MVC3</a></li>
				</ul>
			</div>
		</header>
		<footer id="tools-footer" class="slide-container">
			<div class="slide">
				<h1>The more you know...</h1>
				<div class="slide-content">
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-486T">A deep dive into Expression Blend for designing Metro style apps using HTML</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-212T">Stand out with styling in your HTML app</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM18">Hacking with the F12 Developer Tools (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM08">The Devil Went Down to HTTP: Debugging with Fiddler (Mix11)</a></li>
					</ul>
				</div>
			</div>
		</footer>
	</article>

	
	<article id="resources">
		<footer class="slide-container">
			<div class="slide">
				<h1>HTML5 Resources</h1>
				<div class="slide-content">
					<h2>Are you valid?</h2>
					<ul>
						<li><a href="http://validator.whatwg.org">validator.whatwg.org</a></li>
						<li><a href="http://validator.w3.org">validator.w3.org</a></li>
						<li><a href="http://html5.validator.nu">html5.validator.nu</a></li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-384P">Anatomy of HTML5 sites and Metro style apps using HTML5 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-796T">ASP.NET 4.5 loves HTML5, CSS3 &amp; JavaScript (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-382T">What's new with HTML5, Javascript, and CSS3 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-207T">Reach your customers’ devices with one beautiful HTML5 user interface (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-209T">Build polished collection and list apps in HTML5 (Build)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM01">50 Performance Tricks to Make Your HTML5 Web Sites Faster (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM14">HTML5 for Silverlight Developers (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM11">IE 10 Platform Preview 1: The Future of Adaptive Web Design (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM06">JavaScript: The Language (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM05">Going Mobile with Your Site on Internet Explorer 9 and Windows Phone 7 (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/RES02">Interactive Panel: JavaScript (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/FRM01">Designing Great Experiences for SharePoint 2010 (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/EXT21">HTML5 for Skeptics (Mix11)</a></li>
					</ul>
				</div>
			</div>
		</footer>
	</article>


	<footer id="footer">
		<div class="slide-container">
			<div class="slide">
				<h1>Apple cares, Google cares, Microsoft cares...</h1>
				<ul class="slide-content">
					<li><a href="http://apple.com/html5">apple.com/html5</a></li>
					<li><a href="http://html5rocks.com">html5rocks.com</a></li>
					<li><a href="http://beautyoftheweb.com">beautyoftheweb.com</a></li>
					<li>...you care! ('cause I said so)</li>
				</ul>
			</div>
		</div>
	</footer>


<!-- javascript at the bottom for faster page loading -->
<div id="scripts">
	<!-- use cdn w/ protocol-relative url; fall back to local if necessary -->
	<!-- TODO: Must have "http:" when running from local file system -->
	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.min.js"></script>
	<script>window.jQuery || document.write('<script src="../scripts/jquery-1.6.2.min.js"><\/script>')</script>

	<!-- http://mathiasbynens.be/notes/async-analytics-snippet -->
	<script defer="defer" async="async">
		var $w = $(window), w = $w.width(), h = $w.height(),
			_gaq = [['_setAccount', 'UA-86079-7'], ['_trackPageview'], ['_setCustomVar', 1, 'Browser Size', w+'x'+h]];
		(function (d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1; g.src = ("https:" == location.protocol ? "//ssl" : "http://www") + ".google-analytics.com/ga.js"; s.parentNode.insertBefore(g, s); } (document, "script"));
	</script>

	<!-- TODO: Merge these scripts -->
	<script src="../scripts/play.js"></script>
	<script src="../scripts/deck.core.js"></script>
	<script src="../scripts/shCore.js"></script> 
	<script src="../scripts/shBrushJScript.js"></script> 
	<script src="../scripts/shBrushXml.js"></script>
</div>

</body>
</html>